GridView

网格视图在UI界面开发时也是很常用的，比如相册、视频列表中经常会遇到，Flutter中通常使用GridView.count()和GridView.builder()方法来创建网格视图。

通过GridView.count()创建
其主要的一些属性有部分和ListView中属性相同，不同的属性如下：

• crossAxisCount

　　　　表示垂直于主轴方向上的单元格Widget数量。如果scrollDirection为Axis.vertical，则表示水平单元格的数量；如果scrollDirection为Axis.horizontal，则表示垂直单元格的数量。

• mainAxisSpacing

　　　　表示主轴方向单元格的间距。

• crossAxisSpacing

　　　　表示垂直于主轴方向的单元格间距。

• childAspectRatio

　　　　表示单元格的宽高比。

• children

　　　　表示所有单元格中Widget的集合，GridView里展示的内容。

  Widget getGridView() {
    return GridView.count(
      scrollDirection: Axis.vertical,
      reverse: false,
      controller: scrollController,
      primary: false,
      physics: AlwaysScrollableScrollPhysics(),
      padding: EdgeInsets.all(15.0),
      crossAxisCount: 2,
      mainAxisSpacing: 30.0,
      crossAxisSpacing: 15.0,
      childAspectRatio: 1.5,
      children: <Widget>[
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Banana'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Orange'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Tomato'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Banana'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Orange'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Tomato'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Banana'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Orange'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Tomato'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Banana'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Orange'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Tomato'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Banana'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Orange'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Tomato'),),
        Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('Apple'),),
      ],
    );
  }

通过GridView.builder()创建
该创建方式主要用于动态网格视图或大数据的网格视图。不同于GridView.count()的是其需要自己创建gridDelegate属性

• gridDelegate

　　　　网格代理对象，一般使用SliverGridDelegateWithFixedCrossAxisCount对象创建，可指定crossAxisCount、mainAxisSpacing、crossAxisSpacing和childAspectRatio等值。

• itemCount

　　　　表示网格的单元格总数。

• itemBuilder

　　　　其值为一个函数：Widget Function(BuildContext context, int index)，实现该函数用于创建每个网格对应的Widget。

  Widget getGridViewBuilder() {
    return GridView.builder(
      padding: EdgeInsets.all(15.0),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 30.0,
        crossAxisSpacing: 15.0,
        childAspectRatio: 1.5,
      ),
      itemCount: 29,
      itemBuilder: (buildContext, index) {
        return Container(color: Colors.redAccent, alignment: Alignment.center, child: Text('第 ${index+1} 个Apple'),);
      },
    );
  }