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

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

ListView嵌套GridView

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

Flutter中ListView实际应用

  @override
  Widget buildBody() {
    return ListView.builder(
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length);
  }

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

1.ListView

ListView(
  shrinkWrap: true, 
  padding: const EdgeInsets.all(20.0),
  children: <Widget>[
    const Text('I\'m dedicating every day to you'),
    const Text('Domestic life was never quite my style'),
    const Text('When you smile, you knock me out, I fall apart'),
    const Text('And I thought I was so smart'),
  ],
);

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

2.ListView.builder

ListView.builder(
        ... 部分参数这里没用到就没有列出来
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length)

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

3.ListView.separated

ListView.separated(
      ... 部分参数这里没用到就没有列出来
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length)
        //分割器构造器
        separatorBuilder: (BuildContext context, int index) {
          return index%2==0?divider1:divider2;
        },
    );

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

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

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

 const Card({
    Key key,
    this.color,//背景颜色
    this.shadowColor, //卡片阴影颜色
    this.elevation,//卡片阴影大小
    this.shape, //形状
    this.borderOnForeground = true,//前景色
    this.margin,//内部控件间距
    this.clipBehavior,//裁剪方式
    this.child, //子控件
    this.semanticContainer = true,
  })

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

Flutter中GridView实际应用

1.GridView

GridView({
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, //控制子widget layout的委托
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

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

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

SliverGridDelegateWithFixedCrossAxisCount

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

SliverGridDelegateWithFixedCrossAxisCount({
  @required double crossAxisCount, //横轴子元素的数量。此属性值确定后子元素在横轴的长度就确定了，即ViewPort横轴长度除以crossAxisCount的商
  double mainAxisSpacing = 0.0,//主轴方向的间距。
  double crossAxisSpacing = 0.0,//横轴方向子元素的间距。
  double childAspectRatio = 1.0,//子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。
})

SliverGridDelegateWithMaxCrossAxisExtent

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

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent,//为子元素在横轴上的最大长度
  double mainAxisSpacing = 0.0,//主轴方向的间距。
  double crossAxisSpacing = 0.0,//横轴方向子元素的间距。
  double childAspectRatio = 1.0,//子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。
})

2.GridView.builder

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

GridView.builder(
 ...
 @required SliverGridDelegate gridDelegate, 
 @required IndexedWidgetBuilder itemBuilder,
)

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

GridView.builder(
                //将所有子控件在父控件中填满
                shrinkWrap: true,
                padding: EdgeInsets.only(
                    left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                //解决ListView嵌套GridView滑动冲突问题
                physics: NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, //每行几列
                    childAspectRatio: 3),
                itemCount: widget.navigationData.articles.length,
                itemBuilder: (context, index) {
                 //要返回的item样式
                    },
                  );
                })

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

Flutter中滑动组件总结

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