网格列表组件（GridView）

数据量很大时用矩阵方式排列比较清晰，此时用网络列表组件，即为GridView组件，可以实现多行多列的应用场景。使用GridView创建网络列表有多种方式：

GridView.count通过单行展示个数创建GridView。

GridView.extent通过最大宽度创建GridView。

组件属性及描述：

属性名	类型	默认值	说明
scrollDirection	Axis	Axis.vertical	滚动的方向，有垂直和水平两种，默认为垂直方向
reverse	bool	fase	默认是从上或者左向下或者右滚动的，这个属性控制是否反向，默认值为false，即不反向滚动
controller	ScrollController		控制child滚动时候的位置
primary	bool		是否是与父节点的PrimaryScrollController所关联的主滚动视图
physics	ScrollPhysics		滚动的视图如何响应用户的输入
shrinkWrap	bool	fase	滚动方向的滚动视图内容是否应该由正在查看的内容所决定
padding	EdgeInsetsGeometry		四周的空白区域
GridDelegate	SliverGridDelegate		控制GridView中子节点布局的delegate
CacheExtent	double		缓存区域
crossAxisSpacing	double		水平子Widget之间间距
mainAxisSpacing	double		垂直子Widget之间间距
crossAxisCount	int		一行的Widget数量
childAspectRatio	double		子Widget宽高比例

写法一：GridView.count

GridView.count(
      //水平子Widget之间间距
      crossAxisSpacing: 10.0,
      //垂直子Widget之间间距
      mainAxisSpacing: 30.0,
      //GridView内边距
      padding: EdgeInsets.all(10.0),
      //一行的Widget数量
      crossAxisCount: 2,
      //子Widget宽高比例
      childAspectRatio: 2.0,
      //子Widget列表
      children: <Widget>[
         //组件集       
              ],
     );

写法二：GridView.builder

@override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.builder(
        itemCount: datas.length,
        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
            crossAxisCount: 3,
            //纵轴间距
            mainAxisSpacing: 20.0,
            //横轴间距
            crossAxisSpacing: 10.0,
            //子组件宽高长度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          return getItemContainer(datas[index]);
        });
  }

Widget getItemContainer(String item) {
    return Container(
      width: 5.0,
      height: 5.0,
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

注：对于SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素个数不再固定，其水平个数也就是有几列，由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。

写法三：GridView.custom()

@override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
        childrenDelegate: SliverChildBuilderDelegate((context, position) {
          return getItemContainer(datas[position]);
        }, childCount: datas.length));
  }