Flutter-GridView

GridView 构建二维网格列表。

构造参数

    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    Clip clipBehavior = Clip.hardEdge,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String restorationId,
  })

大部分与ListView相同，重点关注gridDelegate参数。其类型为SliverGridDelegate它的作用是控制GridView子组件如何排列(layout)。
SliverGridDelegate是一个抽象类，其两个SliverGridDelegate的子类为SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

SliverGridDelegateWithFixedCrossAxisCount：提供了一种横轴为固定数量的子元素的layout算法。
SliverGridDelegateWithMaxCrossAxisExtent：提供了一种横轴子元素为固定最大长度的layout算法。

Samples

1.使用SliverGridDelegateWithFixedCrossAxisCount算法构造

    required this.crossAxisCount,//代表横轴子元素个数
    this.mainAxisSpacing = 0.0,主轴方向上的间距
    this.crossAxisSpacing = 0.0,//横轴子元素间距
    this.childAspectRatio = 1.0,//子元素在横轴和主轴上的长度比例
  })

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body: Container(
          child: GridView(
            //横轴固定子元素个数
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴子元素个数
              crossAxisCount: 3,
              //横轴和纵轴比例
              childAspectRatio: 1.0,
            ),
            children: <Widget>[
              Icon(Icons.phone),
              Icon(Icons.add),
              Icon(Icons.map),
              Icon(Icons.lock),
              Icon(Icons.ad_units),
              Icon(Icons.add_a_photo),
            ],
          ),
        ));
  }
}

快捷方式:
  child: GridView.count(
            //横轴子元素个数
            crossAxisCount: 3,
            //横轴和纵轴比例
            childAspectRatio: 1.0,
            children: <Widget>[
              Icon(Icons.phone),
              Icon(Icons.add),
              Icon(Icons.map),
              Icon(Icons.lock),
              Icon(Icons.ad_units),
              Icon(Icons.add_a_photo),
            ],
          ),

2.使用SliverGridDelegateWithMaxCrossAxisExtent算法构造

    required this.maxCrossAxisExtent,//代表子元素在横轴上的最大长度
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  })

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body: Container(
          child: GridView(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 110.0, childAspectRatio: 1.0),
            children: <Widget>[
              Icon(Icons.phone),
              Icon(Icons.add),
              Icon(Icons.map),
              Icon(Icons.lock),
              Icon(Icons.ad_units),
              Icon(Icons.add_a_photo),
            ],
          ),
        ));
  }
}
快捷方式:
 child: GridView.extent(
            maxCrossAxisExtent: 110.0,
            childAspectRatio: 1.0,
            children: <Widget>[
              Icon(Icons.phone),
              Icon(Icons.add),
              Icon(Icons.map),
              Icon(Icons.lock),
              Icon(Icons.ad_units),
              Icon(Icons.add_a_photo),
            ],
          ),

3.懒加载方式GridView.Builder。
上面两种方式只适用于子元素较少的情况下，因为在其是在构建的时候一次性把所有子Widget都构建好的。当数量较多时就要用到GridView.Builder()懒加载模型了。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("GridView"),
        ),
        body: Container(
          child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 1.0
              ), itemCount: 20,
              itemBuilder: (context, index) {
                return Icon(Icons.add_a_photo);
              }),
        ));
  }
}