flutter GridView 九宫格

1 引言

GridView是常用可滚动组件之一，在Flutter中通常使用GridView构建二维网格列表，GridView创建方法有五种，描述如下

GridView的构造函数方法，一次性构建所有的子条目，适用于少量数据

GridView.builder方式来构建，懒加载模式，适用于大量数据的情况

GridView.count方式来构建，适用于固定列的情况，适用于少量数

GridView.extent方式来构建，适用于条目有最大宽度的限制的情况，适用于少量数据的情况下

GridView.custom  方式来构建，可配置子条目的排列规则也可配置子条目的渲染加载模式

2 滑动组件的公有属性

GridView也是滑动组件系列中的一个，它也有滑动组件一些公用的属性，简单描述如下：

///滑动方向 Axis scrollDirection = Axis.vertical, ///是否滑动到底部 bool reverse = false, ///滑动控制器 ScrollController controller, ///是否使用默认的控制器 bool primary, ///滑动到边界时的回弹效果 ScrollPhysics physics, ///内边距 EdgeInsetsGeometry padding,

3 通过GridView的构造函数来创建

通过GridView的构造函数来构建，通过参数children来构建GridView中使用到的所有的子条目，通过参数gridDelegate配置SliverGridDelegate来配置子条目的排列规则。

SliverGridDelegate声明为abstract抽象的，所以需要使用它的子类来构建。

SliverGridDelegate有两个直接的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

通过SliverGridDelegateWithFixedCrossAxisCount来构建一个横轴为固定数量的子条目的GridView，如下图所示。

对应代码如下：

///GridView的基本使用class GridViewBaseUsePage extends StatefulWidget { @override State createState() { return ScrollHomePageState(); }}

class ScrollHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: Text("GridView基本使用"), ), ///构建九宫格数据数据 body: buildGridView1(),// body: buildGridView2(), ); } ///GridView 的基本使用 ///通过构造函数来创建 Widget buildGridView1() { return GridView( ///子Item排列规则 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //横轴元素个数 crossAxisCount: 3, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4), ///GridView中使用的子Widegt children: buildListViewItemList(), ); } ///GridView 的基本使用 ///通过custom方式来创建 Widget buildGridView() { return GridView.custom( cacheExtent: 200, ///子Item排列规则 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///子条目的构建模式 childrenDelegate: ///懒加载的模式 SliverChildBuilderDelegate((BuildContext context, int index) { return buildListViewItemWidget(index); })); }

List buildListViewItemList(){ List list = []; ///模拟的8条数据 for (int i = 0; i < 8; i++) { list.add(buildListViewItemWidget(i)); } return list; }

///创建GridView使用的子布局 Widget buildListViewItemWidget(int index) { return new Container( ///内容剧中 alignment: Alignment.center,

///根据角标来动态计算生成不同的背景颜色 color: Colors.cyan[100 * (index % 9)], child: new Text('grid item $index'), ); }}

属性配置说明如下图所示：

通过SliverGridDelegateWithMaxCrossAxisExtent来构建横轴Item数量不固定的GridView，其水平方向Item个数由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing来共同决定。

如下图所示，屏幕分辨率为750*1334的4.7英寸的手机，屏幕宽度逻辑橡素为375.0，屏幕比例devicePixelRatio为2.0。

通过SliverGridDelegateWithMaxCrossAxisExtent配置的子条目设置maxCrossAxisExtent最大宽度为120，时，如下图所示，GridView每一行显示3列。

当本配置maxCrossAxisExtent最大宽度为80，如下图所示，GridView第一行显示4列。

当然当指定一个maxCrossAxisExten值后，在不同手机屏幕分辨率上，每一行展示的列数也有所不同。

4  GridView.count与GridView.extent方式来创建

GridView的count用来构建每行有固定列数的宫格布局，参数crossAxisCount为必选参数，用来配置列数，与使用GridView通过SliverGridDelegateWithFixedCrossAxisCount方式来构建效果一至，基本使用代码如下：

///GridView 的基本使用///通过count方式来创建Widget buildGridView3() { return GridView.count( ///每行的列数 crossAxisCount: 4, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}

GridView的extent用来构建列数不固定，限制每列的最大宽度或者高度的的宫格布局，参数maxCrossAxisExtent为必选参数，用来配置每列允许的最大宽度或者是高度，与使用GridView通过SliverGridDelegateWithMaxCrossAxisExtent方式来构建效果一至，基本使用代码如下：

///GridView 的基本使用///通过count方式来创建Widget buildGridView4() { return GridView.extent( ///每列Item的最大宽度 maxCrossAxisExtent: 120, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}

5 GridView.builder方式来创建

在上面描述到的GridView构造函数、count方法与extent方式来构建，都是一次性将所有的子Item构建出来，所以只适用于少量的数据

GridView的builder方式来构建，是通过懒加载模式来的，参数gridDelegate用来配置子Item的排列规则，与GridView的构造函数中gridDelegate使用一致，可分别使用SliverGridDelegateWithFixedCrossAxisCount构建固定列数的宫格和SliverGridDelegateWithMaxCrossAxisExtent构建不固定列数，固定条目最大宽度或者高度的宫格，基本使用代码如下：

///通过builder方式来创建Widget buildGridView5() { return GridView.builder( ///缓存区域 cacheExtent: 120, ///内边距 padding: EdgeInsets.all(8), ///条目个数 itemCount: 100, ///子Item排列规则 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///懒加载构建子条目 itemBuilder: (BuildContext context,int index){ return buildListViewItemWidget(index); }, );}