Flutter学习八之滑动组件ListView和GridView的使用

今天我们用Flutter来实现这样的一个页面，类似于一个分组列表，在Android 中如果要实现一个这样的页面，实现想到的肯定是RecycleView，然后通过在adapter中设置两个item样式根据在数据中新增一个标示来区分是标题还是内容，一个控件就能搞定，但是在Flutter中并没有适配器的概念，那如果要实现这样的一个布局该怎么办？

通过分析页面得知，这应该是一个嵌套一个来实现的，在Android中还没出来之前，我们如果要实现这样的一个布局，常用的方法其实也是一个嵌套来实现。

Flutter中ListView实际应用

代码很简单，在页面的body中定义一个ListView.builder方法就可以构建一个listView，通过查看官方文档可以知道，构建一个listView有3种方式，分别是：

1.ListView

通过构建的列表组件，需要传入一个 参数来往列表中添加子空间，这种方式适合只有少量的子组件的情况，因为这种方式需要将所有  都提前创建好（这需要做大量工作），而不是等到子  真正显示的时候再创建，这种方式是不支持Sliver的懒加载模型，如果控件太多，会存在性能问题。为true表示填满子组件。

2.ListView.builder

通过ListView.builder构造的列表组件，构建方式支持动态构建，itemBuilder是用来构建列表的item，可以只定义你想要实现的item样式，这里 内部包含一个  组件和一个  组件，实际的用法和ListView用法还是挺像的，和 中的控件类似用来表示宫格的样式。

3.ListView.separated

通过ListView.separated构造的组件，和 的用法区别不大，就多来一个分割构造器 有时候页面每个item之间需要一个分割的控件，这时候就可以使用 来创建一个分割构造器，直接返回一个控件就可以了。

综上所述，当我们列表控件比较少，并且列表样式比较多的时候，我们可以直接采用来构建列表，如果列表数量比较大，而且是需要根据数据来动态控制的话，最好是采用来构建列表，最后如果列表如果需要分割线，或者其他的分割控件，推荐使用组件来实现列表。

为了能动态控制列表item数据更新，定义一个类继承自 来实现一个item样式，item的最外层采用一个包裹，通过源码可知该组件有如下属性：

这个控件和Android中的基本是一样，连名称都一样，主要作用是用来构造一个带阴影的卡片布局，属性也不算多，这里我们在中添加一个竖像布局这个组件内部的控件都是竖像排列的，在 属性中添加一个分类标题和分类内容，这里的也有两种方式构建，

Flutter中GridView实际应用

1.GridView

和的大多数参数都是相同的，我们唯一需要关注的是gridDelegate参数，类型是，它的作用是控制子组件如何排列。

是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个的子类和，我们可以直接使用。

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法，其构造函数为：

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法，其构造函数为：

2.GridView.builder

当子widget比较多时，我们可以通过来动态创建子widget。必须指定的参数有两个：

其中为子widget构建器。具体用法如下：

这里要注意一点的是，因为我们这里的是嵌套在中的，，都是支持滑动的，所以为来避免滑动冲突我们需要禁用子控件的滑动事件，在GridView中添加 就可以禁用其滑动事件，属性对所有支持滑动的控件都支持，也包含。

Flutter中滑动组件总结

Flutter中不论是还是都是有很多的相同之处，都有不同的构造函数，都支持的延迟构建，，Flutter中提出一个概念，如果一个可滚动组件支持模型，那么该滚动可以将子组件分成好多个，只有当r出现在视口中时才会去构建它，这种模型也称为“基于的延迟构建模型”。简单来说就类似于Android上面的，复用机制，只构建当前窗口的数据模型，这样做的好处就是可以提升列表的性能。