Flutter 中的 GridView 小部件：全面指南

Flutter 中的 GridView 小部件：全面指南

在 Flutter 中，GridView 是一个展示数据网格的滚动小部件，类似于表格视图，其中子控件被组织成行和列。它非常适合于展示图像网格、小部件集合等。GridView 同样支持懒加载，这意味着只有当内容进入视口时才会被构建。

基础用法

GridView 最基本的用法是包裹一个网格项的集合：

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  children: <Widget>[
    Container(color: Colors.red,),
    Container(color: Colors.blue,),
    // ... 更多的容器
  ],
)

网格委托

GridView 使用 GridDelegate 来控制网格的布局属性，如子控件的大小、间距等。Flutter 提供了几种 GridDelegate：

SliverGridDelegateWithFixedCrossAxisCount

这个委托创建一个网格，其交叉轴（列）的数量是固定的：

SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3, // 每行的列数
  childAspectRatio: 3, // 子控件的宽高比
)