Flutter3中如何设置SliverGrid不同大小的格子

在Flutter3中，我想实现一个SliverGrid布局，但需要每个格子的大小可以自定义。比如有的格子占1x1单位，有的需要占2x2单位。尝试了SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，但发现它们只能设置统一的格子尺寸。请问应该如何实现这种不规则大小的SliverGrid布局？是否有类似瀑布流但支持自定义格子尺寸的方案？

2 回复

在Flutter3中，使用SliverGrid.count或SliverGrid.extent设置固定大小格子。若需不同大小，可自定义SliverChildBuilderDelegate，在builder中根据索引返回不同尺寸的Container或使用FractionallySizedBox。

更多关于Flutter3中如何设置SliverGrid不同大小的格子的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 3 中，可以使用 SliverGrid 配合 SliverChildBuilderDelegate 和自定义布局来实现不同大小的格子。以下是实现方法：

核心方法：使用 SliverGrid 与 SliverGridDelegateWithFixedCrossAxisCount

通过 gridDelegate 参数设置固定列数，并在 delegate 中动态控制每个 item 的大小。

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 固定列数
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0, // 基础宽高比，可在 delegate 中覆盖
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          // 根据索引动态设置不同大小
          double aspectRatio = (index % 3 == 0) ? 1.5 : 0.8; // 示例逻辑
          return Container(
            alignment: Alignment.center,
            color: Colors.blue[100 * (index % 9)],
            child: Text(
              'Item $index',
              style: TextStyle(fontSize: 16),
            ),
          );
        },
        childCount: 20,
      ),
    ),
  ],
)

进阶方法：自定义 SliverGridDelegate

如果需要更灵活的控制，可以继承 SliverGridDelegate 并重写 getLayout 方法，但通常使用内置代理即可满足需求。

注意事项：

  • 动态调整大小时需确保 childAspectRatio 或容器尺寸适配内容。
  • 可通过 LayoutBuilder 进一步响应式调整。

此方法简单高效，适用于大多数不均匀网格布局场景。

回到顶部