Flutter学习笔记24-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>[],
})

GridView和ListView的大多数参数都是相同的，不同的是gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列。
SliverGridDelegate是一个抽象类，定义了GridView相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

1. SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount实现了一个横轴为固定数量子元素的layout算法，源码：

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

crossAxisCount
横轴子元素的数量
mainAxisSpacing
主轴方向的间距
crossAxisSpacing
横轴方向子元素的间距
childAspectRatio
子元素在横轴长度和主轴长度的比例

ps：子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。这里的子元素指的是子组件的最大显示空间，注意确保子组件的实际大小不要超出子元素的空间。

代码示例：

class CrossAxisCountDemo extends StatelessWidget {
  List<Widget> getGridWidgets() {
    return List.generate(100, (index) {
      return Container(
        color: Colors.blue,
        alignment: Alignment.center,
        child: Text('item$index',
            style: TextStyle(fontSize: 15, color: Colors.white)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 横轴三个子widget
        childAspectRatio: 1.0, // 子widget宽高比为1
        mainAxisSpacing: 10, // 主轴的间距
        crossAxisSpacing: 10, // 交叉轴的间距
      ),
      children: getGridWidgets(),
    );
  }
}

代码运行效果图如下：

2. GridView.count

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，它可以快速的创建横轴固定数量子元素的GridView，上面的示例代码等价于：

class GridViewCountDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      // 横轴三个子widget
      childAspectRatio: 1.0,
      // 子widget宽高比为1
      mainAxisSpacing: 10,
      // 主轴的间距
      crossAxisSpacing: 10,
      // 交叉轴的间距
      children: getGridWidgets(),
    );
  }
}

3. SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法，源码：

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent,
  double mainAxisSpacing = 0.0,
  double crossAxisSpacing = 0.0,
  double childAspectRatio = 1.0,
})

maxCrossAxisExtent
子元素在横轴上的最大长度

代码示例：

class CrossAxisExtentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 1.0,
      ),
      children: getGridWidgets(),
    );
  }
}

代码运行效果图：

4. GridView.extent

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

class GridViewExtentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 100.0,
      mainAxisSpacing: 10.0,
      crossAxisSpacing: 10.0,
      childAspectRatio: 1.0,
      children: getGridWidgets(),
    );
  }
}

5. GridView.builder

和ListView一样，. GridView使用构造函数会一次性创建所有的子Widget，会带来性能问题，所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。GridView.builder必须指定的参数有两个：

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

itemBuilder为子widget构建器。
假设我们需要从一个异步数据源（如网络）分批获取一些Icon，然后用GridView来展示，代码示例：

class InfiniteGridViewDemo extends StatefulWidget {
  @override
  _InfiniteGridViewDemoState createState() => _InfiniteGridViewDemoState();
}

class _InfiniteGridViewDemoState extends State<InfiniteGridViewDemo> {
  List<IconData> _icons = []; // 保存Icon数据

  @override
  void initState() {
    super.initState();
    _retrieveIcons();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 2.0,
      ),
      itemCount: _icons.length,
      itemBuilder: (context, index) {
        // 如果显示到最后一个并且Icon总数小于200时继续获取数据
        if (index == _icons.length - 1 && _icons.length < 200) {
          _retrieveIcons();
        }
        return Icon(_icons[index]);
      },
    );
  }

  // 模拟异步获取数据
  void _retrieveIcons() {
    Future.delayed(Duration(milliseconds: 200)).then((value) {
      setState(() {
        _icons.addAll([
          Icons.ac_unit,
          Icons.airport_shuttle,
          Icons.all_inclusive,
          Icons.beach_access,
          Icons.cake,
          Icons.free_breakfast
        ]);
      });
    });
  }
}

_retrieveIcons()
在此方法中我们通过Future.delayed来模拟从异步数据源获取数据，每次获取数据需要200毫秒，获取成功后将新数据添加到_icons，然后调用setState重新构建。
itemBuilder
如果显示到最后一个时，判断是否需要继续获取数据，然后返回一个Icon。

如果想实现子元素大小不等的GridView可以使用flutter_staggered_grid_view

代码传送门