Flutter：如何让网格项拉伸而非改变高度？

你要的效果完全可以实现，核心是固定列数和网格项高度，让宽度随窗口尺寸自适应分配，避免像GridView.extent()那样自动调整列数。

方案一：通过LayoutBuilder+SliverGridDelegateWithFixedCrossAxisCount实现 #

利用LayoutBuilder获取父容器的可用宽度，计算出每个网格项的宽度后，通过childAspectRatio固定宽高比，从而保持高度不变：

LayoutBuilder(
  builder: (context, constraints) {
    const int columnCount = 4; // 固定列数
    const double fixedItemHeight = 80; // 固定高度
    const double spacing = 8; // 网格间距

    // 计算单个网格项的可用宽度
    final double availableWidth = constraints.maxWidth - (spacing * (columnCount - 1));
    final double itemWidth = availableWidth / columnCount;

    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columnCount,
        crossAxisSpacing: spacing,
        mainAxisSpacing: spacing,
        childAspectRatio: itemWidth / fixedItemHeight, // 用宽高比锁定高度
      ),
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.blue[100 * (index % 9)],
          alignment: Alignment.center,
          child: Text('Item $index'),
        );
      },
    );
  },
)

方案二：自定义SliverGridDelegate（更灵活） #

如果需要更精细的控制，可以自定义网格代理，直接固定每个网格项的高度，宽度根据窗口自动分配：

class FixedHeightGridDelegate extends SliverGridDelegate {
  final int crossAxisCount;
  final double itemHeight;
  final double crossAxisSpacing;
  final double mainAxisSpacing;

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

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    final double usableWidth = constraints.crossAxisExtent - (crossAxisSpacing * (crossAxisCount - 1));
    final double tileWidth = usableWidth / crossAxisCount;

    return SliverGridRegularTileLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: itemHeight + mainAxisSpacing,
      crossAxisStride: tileWidth + crossAxisSpacing,
      childMainAxisExtent: itemHeight,
      childCrossAxisExtent: tileWidth,
    );
  }

  @override
  bool shouldRelayout(covariant SliverGridDelegate oldDelegate) {
    return oldDelegate is FixedHeightGridDelegate &&
        (oldDelegate.crossAxisCount != crossAxisCount ||
            oldDelegate.itemHeight != itemHeight ||
            oldDelegate.crossAxisSpacing != crossAxisSpacing ||
            oldDelegate.mainAxisSpacing != mainAxisSpacing);
  }
}

// 使用示例
GridView.custom(
  gridDelegate: FixedHeightGridDelegate(
    crossAxisCount: 4,
    itemHeight: 80,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(
        color: Colors.blue[100 * (index % 9)],
        alignment: Alignment.center,
        child: Text('Item $index'),
      );
    },
    childCount: 20,
  ),
)

这两种方案都能实现窗口调整时，网格项仅拉伸宽度、高度保持固定且列数不变的效果，解决你之前用GridView.extent()自动改列数的问题。

内容的提问来源于stack exchange，提问作者tutuna faltu