Flutter 入门指北(Part 7)之滑动部件

假如我们要显示一段文字，比如将 一段又臭又长的文字 在界面上显示 1000 次，不难完成吧

很简单，运行到手机...「诶诶诶，**，怎么只显示了一部分，剩下的怎么画不下去」

日常开发中，会遇到很多这种情况，许多界面不是一页就能够显示完的。那么这里提下可滑动的容器部件

SingleChildScrollView

这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。现在给前面写的 Text 包裹上一层 SingleChildScrollView 然后再运行，文字全部都展示出来了。

如果需要实现一个垂直的滚动列表，可以直接通过 SingleChildScrollView 包裹 Column 来实现，列表内容全部塞到 Column 即可

运行结果会根据你的 letters 不同而不同，这边就不贴效果图了，反正你可以看到一串列表...

那么如果需要实现横向滚动列表呢，稍稍做下修改就行了

效果图也不贴了，都比较简单。

该部分代码查看 single_child_scroll_main.dart 文件*

ListView

平时开发 Android 的时候，如果有相同格式的列表要实现，一般会使用 ListView 或者 RecyclerView 来实现，Flutter 也提供了类似的部件 ListView

实现 ListView 的方法主要有

1. 通过 ListView 设置 children 属性实现

2. 通过 ListView.custom 实现

3. 通过 ListView.builder 实现

4. 通过 ListView.separated 实现带分割线列表

ListView children

第一种方法实现列表，和通过 SingleChildScrollView + Column / Row 的方法比较类似，不过可以直接通过指定 ListView 的 scrollDirection 就可以了。

ListView.custom

如果每个 item 的高度可以确定，那么推荐通过 itemExtent 来设置 item 的高度/宽度，能够加快 ListView 的渲染速度。如果不指定高度/宽度，ListView 需要根据每个 item 来计算 ListView 的高度，这个计算过程是需要消耗时间和资源的

ListView.builder

该方法同 custom 类似，custom 需要通过一个 Delegate 生成 item，该方法直接通过 builder 生成，同时也可以直接指定 item 的高度

相对比较简单，代码也比较少...就冲这点，我也愿意用这个方法

ListView.separated

如果需要在每个 item 之间添加分割线，那么通过以上的方式实现就比较困难了，所以 Flutter 提供了 separated 方法用来快速构建带有分割线的 ListView

加入我们的 item 之间的分割线需要如下样式：奇数位和偶数位之间用黑色分割线，偶数位和奇数位之间用红色分割线

以上代码查看 listview_main.dart 文件

总结下：如果 item 的高度能够准确获取，一定要指定 itemExtent 的值，这样会更加高效，至于要通过哪种方式来生成，完全看个人喜好吧。

ExpansionTile

既然讲到了 ListView，在日常开发中，折叠列表也是一个比较常用的，所以这边要提下 ExpansionTile 这个部件，因为相对比较简单，所以直接上代码了

那么实现折叠列表也就是通过 ListView 创建一个 ExpansionTile 列表即可，先准备下模拟的数据

在平时开发过程中，后台返回的数据应该是列表嵌套列表的形式比较多，我这边主要就是为了偷懒就随便弄了，接着修改下 body 的代码

最终的效果就是个折叠列表了

该部分代码查看 expansion_tile_main.dart 文件

当然了，只要数据到位，别说两层折叠，三层，四层甚至更多层都能够实现，源码中有实现四层的 demo，这边就不贴代码了，有需要的小伙伴可以查看源码

GridView

生成列表可以通过 ListView 来实现，那么同样，实现网格列表 Flutter 也提供了 GridView 来实现，实现 GridView 的方法也很多...我数了下，大概有 10 种..对你没看错，就是那么多，(诶诶诶，别走啊...虽然方法有点多，但是，大同小异)

GridView

GridView 需要一个 gridDelegate，gridDelegate 目前有两种

1. SliverGridDelegateWithFixedCrossAxisCount 看命名就知道，值固定数量的，这个数量是只单排的数量

2. SliverGridDelegateWithMaxCrossAxisExtent 这个是设置最大宽度/高度，在这个值范围内取最大值，比如一排能给你排下 6 个，但是远不到设置的最大值，它绝不给你排 6 个

那么接下来的使用就比较简单了

关键地方已经添加了注释，跑下运行效果

接下来换一种 delegate 试试效果，当然这个最大值可以根据个人喜好来设置

为了方便写法呢，Flutter 对以上的两种方式进行了封装，省略了 delegate

GridView.count/GridView.extent

直接看下如何修改

运行的效果入和前面的相同

GridView.custom

这种生成方式，比 GridView 多了一个 childrenDelegate，childrenDelegate 主要分为两种，一种是通过 IndexedWidgetBuilder 来构建 item 的 SliverChildBuilderDelegate，还有一种是通过 List 来构建 item 的 SliverChildListDelegate，所以...这边直接有 4 中生成方式，当然，我们只需要了解 childrenDelegate 如何使用即可

运行效果也同上面，不多帖了。

GridView.builder

前面介绍的方法中，生成 item 的方式基本上是通过 List 进行转换的，在 custom 提到了 IndexWidgetBuilder 的生成方式，当然，在 ListView 的时候也用到了这种生成方式，当然 GridView 也有啊，要「雨露均沾」你说是吧

到这 10 种方式就说完了。终于可以歇一口气了。

该部分代码查看 gridview_main.dart 文件

CustomScrollView

在平时的开发中，应该会遇到这么种情况，头部是一个 GridView 接下来拼接一些别的部件，然后再拼接一个列表

因为 GridView  和 ListView 亮着都是可滑动的部件，直接拼接肯定会有「滑动冲突」，所以 Flutter 就提供了一个粘合剂，CustomScrollView，那么 Flutter 如何实现呢，因为会涉及到 Sliver 系列部件，所以这边先看下大概的代码，下节会补充 Sliver 系列部件的内容

该部分代码查看 custom_scroll_main.dart 文件

滑动部件其实还有好几个，但是以上介绍的在平时开发过程中够用了，如果后期发现还需要别的部件，我会继续补上。在结束前，我们再说下如何通过 ScrollController 来控制 Scrollable 的滚动位置。例如我们需要实现，当滚动的距离大于一定距离的时候显示一个回到顶部的按钮，有了 ScrollController 就能够非常方便的实现

ScrollController

因为需要根据滑动的距离显示回到顶部按钮，那么就需要通过一个状态位来控制按钮显隐

最后代码的地址还是要的：
https://github.com/kukyxs/flutter_arts_demos_app

本文转载自异步社区

原文链接：

https://www.epubit.com/articleDetails?id=N04a0f006-6bc5-420d-8292-93e65667b4cf