今天我们用Flutter来实现这样的一个页面，类似于一个分组列表，在Android 中如果要实现一个这样的页面，实现想到的肯定是RecycleView，然后通过在adapter中设置两个item样式根据在数据中新增一个标示来区分是标题还是内容，一个控件就能搞定，但是在Flutter中并没有适配器的概念，那如果要实现这样的一个布局该怎么办？ 通过分析页面得知，这应该是一个ListView嵌套一个GridView来实现的，在Android中RecycleView还没出来之前，我们如果要实现这样的一个布局，常用的方法其实也是一个ListView嵌套GridView来实现。
代码很简单，在页面的body中定义一个ListView.builder方法就可以构建一个listView，通过查看官方文档可以知道，构建一个listView有3种方式，分别是：
通过ListView构建的列表组件，需要传入一个 children参数来往列表种添加子空间，这种方式适合只有少量的子组件的情况，因为这种方式需要将所有 children 都提前创建好（这需要做大量工作），而不是等到子 widget 真正显示的时候再创建，这种方式是不支持Sliver的懒加载模型，如果控件太多，会存在性能问题。shrinkWrap为true表示填满子组件。
通过ListView.builder构造的列表组件，构建方式支持动态构建，itemBuilder是用来构建列表的item，可以只定义你想要实现的item样式，这里 ItemNavigation内部包含一个 Text 组件和一个 GridView 组件，GridView实际的用法和ListView用法还是挺像的，和 Android中的GridView控件类似用来表示宫格的样式。
通过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也有两种方式构建，
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指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。 })当子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中不论是GridView还是ListView都是有很多的相同之处，都有不同的构造函数，都支持Sliver的延迟构建，，Flutter中提出一个Sliver概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个Sliver，只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。简单来说就类似于Android上面的，RecycleView复用机制，只构建当前窗口的数据模型，这样做的好处就是可以提升列表的性能。
