介绍

GridView网格布局在app中的使用频率其实非常高，所以接下来就让我们来看看在Flutter中如何使用吧~

• SliverGridDelegateWithFixedCrossAxisCount：用于固定列数的场景；
• SliverGridDelegateWithMaxCrossAxisExtent：用于子元素有最大宽度限制的场景；

具体使用

固定宽度的方式

GridView.builder(
    gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 100),
    itemBuilder: (_, index) => Container( color: Colors.blue[index % 8 * 100],)),
);

固定数量的方式

GridView.builder(
    // 固定数量的方式
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      childAspectRatio: 16/ 9
    ),
    // 固定宽度的方式
    itemBuilder: (_, index) => Container(
          color: Colors.blue[index % 8 * 100],
        )),
);

其他参数

• mainAxisSpacing：主轴方向上的空隙间距；
• crossAxisSpacing：次轴方向上的空隙间距；
• childAspectRatio：子元素的宽高比例

构造函数：

经过前面的介绍，我们已经对GrdiView组件有了初步了解，下面就来看看如何使用。还记得之前GridView的各种构造函数吗？其实：

1. GridView默认构造函数可以类比于ListView默认构造函数，适用于有限个数子元素的场景，因为GridView组件会一次性全部渲染children中的子元素组件；
2. GridView.builder构造函数可以类比于ListView.builder构造函数，适用于长列表的场景，因为GridView组件会根据子元素是否出现在屏幕内而动态创建销毁，减少内存消耗，更高效渲染；
3. GridView.count构造函数是GrdiView使用SliverGridDelegateWithFixedCrossAxisCount的简写（语法糖），效果完全一致；