Flutter嵌套GridView报RenderFlex高度无界异常问题求解

报错原因 #

• 初始抛出的RenderFlex children have non-zero flex but incoming height constraints are unbounded异常，本质是GridView作为可滚动组件，默认会尝试占满垂直方向所有可用空间，当它被嵌套在没有明确高度约束的多层Column、无有效高度限制的Expanded结构中时，父组件无法传递确定的高度边界，就会触发高度无界错误。
• 调整结构后出现的新异常，来自多余嵌套导致的约束传递冲突：你在Expanded中又嵌套了无实际布局作用的Column+Expanded结构，Flex布局的弹性分配逻辑和滚动组件的空间占用逻辑冲突，同时没有指定网格子元素的宽高比、没有关闭GridView的默认滚动，导致布局计算失败。
• 你的需求是展示固定4个元素、2行2列排布的静态网格，不需要GridView占据无限高度，也不需要开启滚动能力。

修复步骤 #

• 清理无意义的多层嵌套Column结构，避免Flex组件之间的弹性约束冲突
• 给GridView添加physics: const NeverScrollableScrollPhysics()配置，关闭默认滚动能力，消除滚动组件和父布局的滑动、空间占用冲突
• 在SliverGridDelegateWithFixedCrossAxisCount中补充childAspectRatio参数，指定网格子项的宽高比，让GridView可以计算出自身的确定高度，不再无限抢占垂直空间
• 将crossAxisCount设置为2，匹配2列排布、4个元素自动分成2行的需求

修复后的核心代码片段 #

替换原有出错的GridView区域代码即可：

Padding(
  padding: sidePadding,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      addVerticalSpace(15),
      SizedBox(
        // 可根据设计稿调整网格区域总高度，2行元素+行间距建议240-280
        height: 260,
        child: GridView(
          physics: const NeverScrollableScrollPhysics(),
          padding: const EdgeInsets.all(8.0),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16, // 列之间的间距
            mainAxisSpacing: 16, // 行之间的间距
            childAspectRatio: 1.2, // 子元素宽/高比值，根据卡片样式调整
          ),
          children: const [
            Text('one'),
            Text('two'),
            Text('three'),
            Text('four'),
          ],
        ),
      ),
      addVerticalSpace(10),
    ],
  ),
),

可选优化 #

如果需要让网格区域自动占满页面除顶部标题、底部按钮之外的剩余空间，不需要写死高度，可以把外层SizedBox替换为Expanded，注意不要在Expanded和GridView之间嵌套没有高度约束的Column组件即可。
原代码中floatingActionButton部分的Container+Align嵌套属于冗余写法，FloatingActionButtonLocation.centerFloat已经可以实现按钮底部居中定位，可以直接精简。

内容的提问来源于stack exchange，提问作者RAF Algowid