Flutter布局中添加GridView组件后应用崩溃该如何解决

崩溃原因 #

• 核心问题是垂直方向布局约束冲突：Column组件自身在垂直方向没有固定高度限制，会尽可能适配子组件的高度；而GridView默认会尝试占满垂直方向的所有可用空间，同时你嵌套的Container也没有指定明确的高度，导致Flutter布局引擎无法确定GridView应该占用的高度，最终抛出Horizontal viewport was given unbounded height类型的布局异常，触发应用崩溃。
• 额外说明：你当前的GridView.count没有指定children也属于不规范写法，但这不是崩溃的核心诱因，核心还是高度约束缺失。

可行解决方法 #

方案1：用Expanded包裹GridView（最常用） #

如果要让GridView占满Column除了顶部卡片之外的剩余空间，直接用Expanded包裹GridView外层的Container即可，示例代码：

Expanded(
  child: Container(
    child: GridView.count(
      crossAxisCount: 2,
      // 补充你的网格子项代码
      children: [
        // 你的自定义item组件
      ],
    ),
  ),
)

Expanded会自动给子组件分配Column的剩余高度，明确GridView的高度约束。

方案2：给GridView外层的Container指定固定高度 #

如果你需要GridView只占用固定高度，直接给外层Container加height属性即可：

Container(
  height: 400, // 可按需调整高度数值
  child: GridView.count(
    crossAxisCount: 2,
    children: [],
  ),
)

方案3：禁用GridView的滚动特性，适配内容高度 #

如果你的网格项数量不多，不需要GridView自身滚动，可以设置shrinkWrap: true和physics: NeverScrollableScrollPhysics()，让GridView高度适配自身内容的总高度：

Container(
  child: GridView.count(
    crossAxisCount: 2,
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    children: [],
  ),
)

注意该方案如果网格项过多，总高度超过屏幕剩余空间会和Column的无滚动特性冲突，仅适合少量网格项的场景。

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