Flutter的GridView使用

GridView参数

GridView可以构建一个二维网格列表，其默认构造函数定义如下：

GridView({
  Axis scrollDirection = Axis.vertical,//滚动方向
  bool reverse = false,//是否翻转
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, //控制子widget layout的委托
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
  
 })

gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)。

SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。

Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，我们可以直接使用，下面我们分别来介绍一下它们。

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法，其构造函数为：

SliverGridDelegateWithFixedCrossAxisCount({
  @required double crossAxisCount, 
  double mainAxisSpacing = 0.0,
  double crossAxisSpacing = 0.0,
  double childAspectRatio = 1.0,
  })

• crossAxisCount：横轴子元素的数量。此属性值确定后子元素在横轴的长度就确定了，即ViewPort横轴长度除以crossAxisCount的商。

• mainAxisSpacing：主轴方向的间距。

• crossAxisSpacing：横轴方向子元素的间距。

• childAspectRatio：子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。

body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, //横轴三个子widget
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 8.0,
      childAspectRatio: 1.0 /0.5,//设置子Widget的宽高比
  ),
  children:List.generate(30,(index){
    return Container(
      alignment: Alignment.center,
      color: Colors.grey[100],
      child: Text('$index个item'),
    );
  })
),

GridView.extent

GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent，我们通过它可以快速的创建纵轴子元素为固定最大长度的的GridView，上面的示例代码等价于：

GridView.extent(
//每个子widget的宽度
  maxCrossAxisExtent: 120.0,
  //宽高比例
  childAspectRatio: 1.0,
  //间距
  mainAxisSpacing: 8.0,
  crossAxisSpacing: 8.0,
  children: List.generate(50, (int index) {
    return Container(
      color: Colors.grey[100],
      child: Text('$index个item'),
    );
  }),
),

GridView.builder

当子widget比较多时，我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个：

GridView.builder(
 ...
 @required SliverGridDelegate gridDelegate, 
 @required IndexedWidgetBuilder itemBuilder,
)

其中itemBuilder为子widget构建器。

GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, //每行三列
            childAspectRatio: 1.0 //显示区域宽高相等
        ),
        itemCount: _icons.length,
        itemBuilder: (context, index) {
          
          return  Text('$index个item');
        }
    );

GridView.custom

GridView.count(

        crossAxisCount: 3,  //一行的 Widget 数量
        children: <Widget>[
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本'),
          Text('这是一个文本')
        ],
    );

class MyApp extends StatelessWidget {
  static List<Widget> _builderItem (int index){
    return  List.generate(index, (int index) {
      return Container(
        color: Colors.grey[100],
        child: Text('$index个item'),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        appBar: AppBar(title: Text('1221')),
        body: GridView.extent(
          maxCrossAxisExtent: 120.0,
          childAspectRatio: 1.0,
          mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0,
          children:_builderItem(100),
        ),
      ),
    );
  }
}