Flutter 中如何使用 GridView？

推荐答案

在 Flutter 中，GridView 用于展示网格布局的内容。你可以通过以下几种方式来使用 GridView：

1. 使用 GridView.count 创建固定列数的网格

GridView.count(
  crossAxisCount: 2, // 每行显示的列数
  children: List.generate(20, (index) {
    return Center(
      child: Text('Item $index'),
    );
  }),
);

2. 使用 GridView.builder 创建动态网格

// www.javascriptcn.com code example
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 每行显示的列数
  ),
  itemCount: 20,
  itemBuilder: (context, index) {
    return Center(
      child: Text('Item $index'),
    );
  },
);

3. 使用 GridView.extent 创建基于最大宽度的网格

GridView.extent(
  maxCrossAxisExtent: 100, // 每个子项的最大宽度
  children: List.generate(20, (index) {
    return Center(
      child: Text('Item $index'),
    );
  }),
);

本题详细解读

1. GridView.count

GridView.count 是一种简单的方式来创建网格布局，它允许你指定每行显示的列数。crossAxisCount 参数决定了每行显示的列数，children 参数则是一个包含所有子项的列表。

2. GridView.builder

GridView.builder 适用于需要动态生成大量子项的场景。它使用 itemBuilder 回调来生成子项，itemCount 参数指定了子项的总数。gridDelegate 参数用于控制网格的布局，通常使用 SliverGridDelegateWithFixedCrossAxisCount 来指定每行的列数。

3. GridView.extent

GridView.extent 允许你通过指定每个子项的最大宽度来创建网格布局。maxCrossAxisExtent 参数决定了每个子项的最大宽度，GridView 会自动调整每行的列数以适应屏幕宽度。

4. 其他参数

• padding: 设置网格的内边距。
• crossAxisSpacing: 设置列之间的间距。
• mainAxisSpacing: 设置行之间的间距。
• childAspectRatio: 设置子项的宽高比。

通过这些参数，你可以灵活地控制 GridView 的布局和外观。