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,),],);}

运行效果展示：

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);
}

运行结果如下：

当使用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>[//一组子WidgetContainer(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
//        ),
//    );}

运行效果如下：