Flutter实现GridView item动态高度 解决冷启动底部溢出报错

• 现有代码用SliverGridDelegateWithFixedCrossAxisCount做网格布局，这个组件默认固定所有子项的宽高比，子项高度完全由手动计算的childAspectRatio决定，没法随内容实际高度自适应。
• 冷启动和flutter run调试启动时，MediaQuery获取到的可用屏幕高度存在计算时机差：调试启动时可能还没算出状态栏、底部安全区的真实高度，冷启动拿到的是系统返回的真实可用高度，原来写死的宽高比计算逻辑不兼容两种场景，分配给子项的高度小于内容实际总高度，就会触发底部溢出。
• 代码存在无效写法：GridView直接子节点外层套Expanded完全没用，Expanded只能在Column、Row这类Flex布局的直接子节点里生效，放在GridView子项里不会有任何作用。
• 商品图写死220px固定高度，在小屏设备上和下方文字、按钮高度叠加后，很容易超出固定分配的item高度。

两种实现方式，优先选第一种，改造成本最低，稳定性最好。

方案1：用支持动态高度的交错网格组件（推荐） #

Flutter官方自带的GridView不支持子项高度自适应，直接用官方维护的flutter_staggered_grid_view组件实现，不需要手动算宽高比，子项高度自动适配内容。

1. 先加依赖，打开项目根目录的pubspec.yaml，在dependencies下添加：

dependencies:
  flutter_staggered_grid_view: ^0.7.0

执行flutter pub get安装依赖。
2. 替换原有GridView.builder代码，删除外层无效的Expanded，去掉硬编码的childAspectRatio逻辑，核心代码如下：

// 替换原有的GridView.builder部分
Padding(
  padding: const EdgeInsets.all(1.0),
  child: StaggeredGrid.count(
    crossAxisCount: 2,
    mainAxisSpacing: 2,
    crossAxisSpacing: 2,
    children: List.generate(CatalogModel.products?.length ?? 0, (index) {
      CatalogItem item = CatalogModel.products![index];
      return InkWell(
        onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ProductDetails(item: item))),
        child: Padding(
          padding: const EdgeInsets.all(1.0),
          child: Container(
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  width: double.infinity,
                  height: 180,
                  child: Image.network(item.image, fit: BoxFit.cover),
                ),
                Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SizedBox(
                          width: double.infinity,
                          child: Text(
                            item.name,
                            textAlign: TextAlign.start,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.cabin(
                                fontSize: 16.0,
                                textStyle: const TextStyle(fontWeight: FontWeight.bold)
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 5.0),
                          child: SizedBox(
                            width: double.infinity,
                            child: Text(
                              item.category,
                              textAlign: TextAlign.start,
                              style: GoogleFonts.cabin(
                                  textStyle: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 11.0,
                                      color: Color(0xFF808080)
                                  )
                              ),
                            ),
                          ),
                        ),
                        PriceDetailsWidget(
                            discount: item.discount,
                            actual_price: item.actual_price,
                            price: item.price
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: const AddToCartWidget(),
                        ),
                      ]
                    )
                ),
              ],
            ),
          ),
        ),
      );
    }),
  ),
)

改完之后每个卡片高度完全由内部内容撑起来，不管是冷启动、热启动还是不同尺寸的设备，都不会出现溢出问题。

方案2：不引入第三方依赖，修正宽高比计算逻辑 #

如果不想加第三方包，就修正原有宽高比的计算逻辑，扣除AppBar、安全区占用的高度，同时调整固定图片高度匹配计算值：

1. 在build方法开头先计算真实可用的布局尺寸：

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  final appBarHeight = AppBar().preferredSize.height;
  // 可用内容高度 = 屏幕总高度 - 状态栏高度 - AppBar高度 - 底部安全区高度
  final availableContentHeight = mediaQuery.size.height -
      mediaQuery.padding.top -
      appBarHeight -
      mediaQuery.padding.bottom;
  // 单个网格项宽度 = (屏幕宽度 - 左右边距)/2
  final itemWidth = (mediaQuery.size.width - 2) / 2;
  // 手动计算单个item的内容总高度：图片+内边距+文字+按钮+间距
  const itemTotalHeight = 180 + // 图片高度
      20 + // 图片下方容器上下内边距
      20 + // 商品标题高度
      5 + // 分类文字顶部间距
      15 + // 分类文字高度
      8 + // 价格组件顶部间距
      20 + // 价格行高度
      8 + // 按钮顶部间距
      36; // 按钮高度
  final childAspectRatio = itemWidth / itemTotalHeight;

  return Scaffold(
    // 原有Scaffold逻辑不变，只把GridView里的childAspectRatio替换成上面计算的值
    // 同时删除item外层无效的Expanded，所有Column组件都加上mainAxisSize: MainAxisSize.min
    // 商品标题加maxLines:2避免长文本撑高布局
  );
}

这个方案需要手动精准计算每个组件的高度，后续改UI还要重新调整计算值，维护成本比方案1高。

• 所有嵌套在自适应布局里的Column组件，一定要加mainAxisSize: MainAxisSize.min，默认Column会撑满父节点分配的最大高度，很容易触发布局冲突。
• 商品名称这类长文本一定要加maxLines和overflow: TextOverflow.ellipsis，避免文字过长撑高布局导致溢出。
• 如果GridView是页面的根滚动组件，不要加shrinkWrap: true，这个属性会让GridView一次性加载所有子项，会导致列表性能差，方案1的StaggeredGrid默认支持懒加载，不需要这个属性。

内容的提问来源于stack exchange，提问作者Abhi S