九宫怎么排列和使用_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  StatecreateState() {    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);        }));  }  ListbuildListViewItemList(){    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);    },  );}