Flutter-GridView的使用说明

The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis, and GridView.extent, which creates a layout with tiles that have a maximum cross-axis extent. A custom SliverGridDelegate can produce an arbitrary 2D arrangement of children, including arrangements that are unaligned or overlapping.

To create a grid with a large (or infinite) number of children, use the GridView.builder constructor with either a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent for the gridDelegate.

To use a custom SliverChildDelegate, use GridView.custom.

To create a linear array of children, use a ListView.

To control the initial scroll offset of the scroll view, provide a controller with its ScrollController.initialScrollOffset property set

根据官方解释，当需要创建大量网格Widget的时候使用GridView。

1、GridView的常用定义

Axis scrollDirection = Axis.vertical,//设置滚动方向，vertical垂直滚动，horizontal水平滚动
bool reverse = false,//设置子Widget是否倒序展示
EdgeInsetsGeometry padding,//设置内边距
@required this.gridDelegate,//控制布局代理，只要使用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent
List<Widget> children = const <Widget>[],//一组子widget

2、使用GridView()的方式创建Widget

在使用过程中直接使用GridView来进行创建，这里面必须要实现一个代理方法，就是gridDelegate，这里我们使用SliverGridDelegateWithFixedCrossAxisCount来演示。

2.1首先来看一下SliverGridDelegateWithFixedCrossAxisCount的定义内容：

  /// Creates a delegate that makes grid layouts with a fixed number of tiles in
/// the cross axis.
///
/// All of the arguments must not be null. The `mainAxisSpacing` and
/// `crossAxisSpacing` arguments must not be negative. The `crossAxisCount`
/// and `childAspectRatio` arguments must be greater than zero.
const SliverGridDelegateWithFixedCrossAxisCount({
@required this.crossAxisCount,//控制一行现实多少个子Widget
this.mainAxisSpacing = 0.0,//设置上下之间的间距(Axis.horizontal设置左右之间的间距)
this.crossAxisSpacing = 0.0,//设置左右之间的间距(Axis.horizontal设置上下之间的间距)
this.childAspectRatio = 1.0,//设置宽高比
})

SliverGridDelegateWithFixedCrossAxisCount里面定义的所有内容都不能为空；特别是mainAxisSpacing和crossAxisSpacing不能为负数，crossAxisCount和childAspectRatio一定要大于等于0。

演示代码如下：

Widget _gridViewDemo() {
    return GridView(
      padding: EdgeInsets.only(left: 16.0,right: 16.0,top: 16.0),
      scrollDirection: Axis.vertical,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 20.0,
          childAspectRatio: 0.7
      ),
      children: <Widget>[
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.grey,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.blue,
        ),
      ],
    );
 }

运行效果展示：

list_view_demo1.jpg

3、使用 GridView.builder的方式创建

GridView.builder创建的Widget必须实现gridDelegate的代理方法，这里使用SliverGridDelegateWithMaxCrossAxisExtent的代理；创建的属于无限个Widget

/// Creates a delegate that makes grid layouts with tiles that have a maximum
/// cross-axis extent.
///
/// All of the arguments must not be null. The [maxCrossAxisExtent] and
/// [mainAxisSpacing], and [crossAxisSpacing] arguments must not be negative.
/// The [childAspectRatio] argument must be greater than zero.
const SliverGridDelegateWithMaxCrossAxisExtent({
@required this.maxCrossAxisExtent,//
this.mainAxisSpacing = 0.0,
this.crossAxisSpacing = 0.0,
this.childAspectRatio = 1.0,

})

以上参数都不能为空。
this.maxCrossAxisExtent//当Axis.vertical时，表示在水平方向上一个Widget的宽度,一行能存放widget的个数为屏幕宽度除以设置的maxCrossAxisExtent值（width/maxCrossAxisExtent），当Axis. horizontal时，表示在垂直方向上一个Widget的高度，一列能够存放Widget的个数为屏幕高度除以设置的maxCrossAxisExtent值（height/maxCrossAxisExtent）。

演示代码：

Widget _gridViewBuilder() {
    Widget __itemBuilder(context,index) {
      return Stack(
        children: <Widget>[
          Image.network('http://pic2.16pic.com/00/01/72/16pic_172477_b.jpg',fit: BoxFit.cover,),
          Positioned(
    //            left: 20.0,
              top: 20.0,
              child: Text('GridView演示$index'))
        ],
      );
    }
    return GridView.builder(
    //      scrollDirection: Axis.horizontal,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing:20.0,
          crossAxisSpacing: 20.0,
          childAspectRatio: 0.8
        ),
        itemBuilder: __itemBuilder
    );
}

运行结果如下：

gridView_build.png

当使用SliverGridDelegateWithFixedCrossAxisCount代理方法实现基本相似，只需要修改下代理方法里面的实现参数就可以。

4、使用GridView.count创建

GridView.count来创建Widget的时候，有点类似于直接使用GridView()的方式，只不过是把gridDelegate的实现方式放到了外面，具体的实现方式，请查看演示代码：

Widget _gridViewCount() {
    return GridView.count(
        crossAxisCount: 3,//每行展示个数
      mainAxisSpacing:20.0,//设置上下之间的间距(Axis.horizontal设置左右之间的间距)
      crossAxisSpacing: 20.0,//设置左右之间的间距(Axis.horizontal设置上下之间的间距)
      childAspectRatio: 0.8,//设置宽高比
      children: <Widget>[//一组子Widget
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.grey,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.blue,
        ),
      ],
    );
}

运行情况请自行copy代码进行查看

5、使用GridView.custom进行创建

GridView.custom进行创建GridView的时候需要实现两个代理方法，gridDelegate和childrenDelegate；gridDelegate是进行布局的代理方法，控制每行或者每列的子Widget个数，以及上下左右间距和宽高比；childrenDelegate有两种实现方式：SliverChildListDelegate和SliverChildBuilderDelegate，这两种在实现上有一定的区别，使用的时候请注意。

下面给出演示代码：

  Widget _gridViewCustom() {
//创建方式一
List<Widget> __gridViewChildCustom() {
  List<Widget> children = new List();
  for(int index = 0; index < 20; index ++) {
    children.add(
        Container(
          color: Colors.orange,
          margin: EdgeInsets.only(bottom: 16.0,left: 16.0,right: 16.0),
          child: Text('GridView..$index', style: TextStyle(
              color: Colors.black,
              backgroundColor: Colors.grey
          ),),
        )
    );
  }
  return children;
}
return GridView.custom(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      mainAxisSpacing:20.0,
      crossAxisSpacing: 20.0,
      childAspectRatio: 0.8,
    ),
    childrenDelegate: SliverChildListDelegate(__gridViewChildCustom())
);
//创建方式二
//    return GridView.custom(
//        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//            crossAxisCount: 3,
//          mainAxisSpacing:20.0,
//          crossAxisSpacing: 20.0,
//          childAspectRatio: 0.8,
//        ),
//        childrenDelegate: SliverChildBuilderDelegate(
//                (BuildContext context, int index) {
//                  return Container(
//                    color: Colors.orange,
//                    child: Text('GridView$index', style: TextStyle(
//                      color: Colors.white,
//                      fontSize: 20.0
//                    ),),
//                  );
//                },
//          childCount: 6
//        ),
//    );
  }

运行效果如下：

gridView_custom.png