Flutter中如何让Container完美适配包裹GridView的高度

要实现Container高度随GridView内容自动适配，不需要设置固定高度，核心是修改GridView的默认滚动相关属性：

核心配置说明 #

GridView默认属于无限高度的可滚动组件，父容器无法感知它的实际内容高度，添加以下两个属性即可解决：

• shrinkWrap: true：强制GridView仅占用自身内容所需的实际高度，不再填充满父组件的最大可用空间
• physics: const NeverScrollableScrollPhysics()：禁用GridView自身的滚动能力，若你需要整体页面滚动，可将外层Container放在SingleChildScrollView/ListView等滚动组件中即可

修正后代码 #

return Container(
  // 无需手动设置height，会自动匹配GridView内容高度
  child: GridView.count(
      scrollDirection: Axis.vertical,
      crossAxisCount: 2,
      // 新增两个适配属性
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      children: List.generate(yourList.length, (index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            // 注意：Grid子项需要明确高度，你可以根据业务需求设置固定值或使用动态适配逻辑
            height: 120,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.black,
              // image: yourList[index].img,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.8),
                  spreadRadius: 2,
                  blurRadius: 2,
                  offset: Offset(0, 3),
                ),
              ],
            ),
          ),
        );
      })),
);

补充说明 #

如果你希望用Wrap实现相同的两列网格效果，需要手动指定每个子项的宽度为(MediaQuery.of(context).size.width - 水平总padding)/2，也可以实现自适应高度，但GridView的方案更适合固定交叉轴数量的网格场景，开发成本更低。

内容的提问来源于stack exchange，提问作者Mamoudou Kane