今天我们用Flutter来实现这样的一个页面，类似于一个分组列表，在Android 中如果要实现一个这样的页面，实现想到的肯定是RecycleView，然后通过在adapter中设置两个item样式根据在数据中新增一个标示来区分是标题还是内容，一个控件就能搞定，但是在Flutter中并没有适配器的概念，那如果要实现这样的一个布局该怎么办？
通过分析页面得知，这应该是一个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复用机制，只构建当前窗口的数据模型，这样做的好处就是可以提升列表的性能。
点击咨询 