Flutter中如何为Grid组件的子项设置矩形形状？

原生SliverGrid.count()默认渲染正方形子组件，核心原因是其构造参数里的childAspectRatio默认值为1：网格布局会先根据交叉轴可用宽度、每行列数计算出单个子组件的宽度，再用「宽度 * childAspectRatio」算出子组件高度，比值为1时自然宽高相等。

根据布局需求，可以从以下3种方案里选最合适的实现：

• 方案1：直接修改childAspectRatio（统一尺寸场景首选，零额外成本）
  如果所有网格子项都是统一比例的矩形，不需要动态高度，直接给childAspectRatio传入目标宽高比值即可。比如要实现宽:高=3:4的竖版矩形卡片，代码如下：

CustomScrollView(
  slivers: [
    SliverGrid.count(
      crossAxisCount: 2, // 每行显示2列
      crossAxisSpacing: 12, // 列间距
      mainAxisSpacing: 12, // 行间距
      childAspectRatio: 3/4, // 宽高比，小于1为竖版矩形，大于1为横版矩形
      children: const [
        // 放入你的卡片组件
      ],
    )
  ],
)

*注意：该方案仅适用于所有子项尺寸比例完全一致的场景，子项高度不统一时不适用。

• 方案2：使用交错网格组件（非统一尺寸/自适应高度场景首选）
  如果子项高度随内容变化，或者需要灵活配置不同子项的尺寸，直接用flutter_staggered_grid_view组件即可，不需要自己手写复杂的布局计算。
  先在pubspec.yaml中引入依赖：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

如果需要卡片高度随内容自动撑开，直接用瀑布流模式的Sliver组件：

CustomScrollView(
  slivers: [
    SliverMasonryGrid.count(
      crossAxisCount: 2,
      mainAxisSpacing: 12,
      crossAxisSpacing: 12,
      childCount: 10,
      itemBuilder: (context, index) {
        // 返回你的卡片组件，高度会自动适配内容
        return const YourCardWidget();
      },
    )
  ],
)

如果需要固定比例的矩形子项，也可以通过组件提供的QuiltedGridTile给每个子项单独配置跨列、宽高规则，灵活度远高于原生SliverGrid。

• 方案3：自定义SliverGridDelegate（无第三方依赖场景）
  如果项目不允许引入第三方包，可以自己继承SliverGridDelegate重写布局计算逻辑，直接指定子项的固定高度，摆脱固定宽高比的限制。示例代码如下：

class FixedHeightGridDelegate extends SliverGridDelegate {
  final int crossAxisCount;
  final double crossAxisSpacing;
  final double mainAxisSpacing;
  final double itemHeight; // 自定义子项固定高度

  const FixedHeightGridDelegate({
    required this.crossAxisCount,
    this.crossAxisSpacing = 12,
    this.mainAxisSpacing = 12,
    required this.itemHeight,
  });

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final usableCrossAxisWidth = constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1);
    final itemWidth = usableCrossAxisWidth / crossAxisCount;
    return SliverGridRegularTileLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: itemHeight + mainAxisSpacing,
      crossAxisStride: itemWidth + crossAxisSpacing,
      childMainAxisExtent: itemHeight,
      childCrossAxisExtent: itemWidth,
      reverseCrossAxis: false,
    );
  }

  @override
  bool shouldRelayout(covariant FixedHeightGridDelegate oldDelegate) {
    return oldDelegate.crossAxisCount != crossAxisCount || oldDelegate.itemHeight != itemHeight;
  }
}

使用时直接传入SliverGrid即可：

SliverGrid(
  gridDelegate: const FixedHeightGridDelegate(
    crossAxisCount: 2,
    itemHeight: 260, // 按需设置你需要的矩形高度
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => const YourCardWidget(),
    childCount: 10,
  ),
)

选型参考：所有卡片尺寸统一就选方案1，改一行参数就能实现；卡片高度不固定、需要自适应内容就选方案2，开发效率最高；不能加第三方依赖就选方案3，自己控制布局逻辑。

内容的提问来源于stack exchange，提问作者William Pineda MHA