【Flutter】使用GridView实现二维网格列表

1 GridView构造函数

GridView({
   
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, 
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

其中，gridDelegate 用来控制 GridView 中的子组件的 layout

 @required SliverGridDelegate gridDelegate,

SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，下面详述。

1.1 SliverGridDelegateWithFixedCrossAxisCount

该子类实现横轴固定（Fixed）数量，构造函数：

SliverGridDelegateWithFixedCrossAxisCount({
   
  @required double crossAxisCount, ///横轴子元素数量
  double mainAxisSpacing = 0.0, ///主轴方向的间距
  double crossAxisSpacing = 0.0, ///横轴方向子元素间距
  double childAspectRatio = 1.0, ///子元素在横轴长度和主轴长度的比例
})

使用方法：

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, //横轴三个子widget
      childAspectRatio: 1.0 //宽高比为1时，子widget
  ),
  children:<Widget>[

  ],
);

也可以写成：

GridView.count( 
  crossAxisCount: 3,
  childAspectRatio: 1.0,
  children: <Widget>[
    
  ],

这种方式使应用无论在横屏还是竖屏横轴方向数量不变，横屏显示时图标会过大。

1.2 SliverGridDelegateWithMaxCrossAxisExtent

该子类实现横轴最大（Max）数量，构造函数：

SliverGridDelegateWithMaxCrossAxisExtent({
   
  double maxCrossAxisExtent, ///子元素在横轴上的最大长度
  double mainAxisSpacing = 0.0, ///主轴方向的间距
  double crossAxisSpacing = 0.0, ///横轴方向子元素间距
  double childAspectRatio = 1.0, ///子元素在横轴长度和主轴长度的比例
})

使用方法：

GridView(
  padding: EdgeInsets.zero,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 120.0,//子元素横轴长度为120.0px，横轴元素数量会随着横轴长度变化
      childAspectRatio: 2.0 //宽高比为2
  ),
  children: <Widget>[
    
  ],
);

也可以写成：

GridView.extent(
   maxCrossAxisExtent: 120.0,
   childAspectRatio: 2.0,
   children: <Widget>[
     
   ],
 );

这种方式适合横竖屏切换，优先使用这种方法开发。

1.3 CridView.builder

当 Widget 比较多时可以使用GridView.builder动态创建子 Widget：

GridView.builder(
 ...
 @required SliverGridDelegate gridDelegate,  ///布局
 @required IndexedWidgetBuilder itemBuilder, ///子 Widget 构建器
)

2 GridView源码解读

GridView 继承自 BoxScrollView 是一个2D布局的模型.
在使用 GridView’.builder 时：

/// itemBuilder will be called only with indices greater than or equal to
/// zero and less than itemCount.

在使用 GridView’.extent 时，横向展示的子元素数量与屏幕宽度有关，需要满足 数量 × maxCrossAxisExtent <= MediaQuery.of(context).size

maxCrossAxisExtent: maxCrossAxisExtent,

///  * [SliverGridDelegateWithFixedCrossAxisCount], which creates a layout with
///    a fixed number of tiles in the cross axis.
///  * [SliverGridDelegateWithMaxCrossAxisExtent], which creates a layout with
///    tiles that have a