Flutter中在Column可用空间拉伸Widget时触发无界高度报错如何解决

报错原因 #

这个报错的核心是垂直方向的Flex组件内部使用带flex属性的Expanded/Flexible时，父组件没有提供确定的高度约束。你的代码存在两个问题：

• Scaffold的body本身会自动适配AppBar和底部导航栏之外的可用高度，你额外套了高度为全屏高度的SizedBox，反而导致body高度超出可用范围，外层Column的高度约束也出现偏差。
• 外层Column的第三个子组件FlexibleContent没有被Expanded/Flexible包裹，导致FlexibleContent的高度处于无上限状态，它内部的垂直方向Flex使用Expanded时无法计算可用高度，直接触发报错。

修复方案 #

按以下步骤修改即可实现需求：

1. 删除body外层多余的SizedBox，直接将Column作为Scaffold的body
2. 给外层Column中的FlexibleContent包裹Expanded，让它占满Column里两段Text之外的所有剩余空间，给内部的Flex提供确定的高度约束
3. 可删除FlexibleContent里多余的SizedBox包裹层，无实际作用

修改后的完整代码如下：

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Playground")),
      bottomNavigationBar: Container(
        width: double.infinity,
        height: 70,
        color: Colors.blueGrey,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.only(top: 20, left: 20),
            child: Text("I am some text"),
          ),
          const Padding(
            padding: EdgeInsets.only(top: 20, left: 20),
            child: Text("I am some text too"),
          ),
          // 用Expanded包裹FlexibleContent，分配剩余所有高度
          const Expanded(child: FlexibleContent()),
        ],
      ),
    );
  }
}

class FlexibleContent extends StatelessWidget {
  const FlexibleContent({super.key});

  @override
  Widget build(BuildContext context) {
    // 去掉多余的SizedBox
    return Flex(
      direction: Axis.vertical,
      children: [
        Expanded(flex: 7, child: Container(width: double.infinity, color: Colors.lightGreen)),
        Expanded(flex: 3, child: Container(width: double.infinity, color: Colors.amberAccent)),
      ],
    );
  }
}

修改后两段Text正常展示，下方的绿色和黄色Container会按照7:3的比例占满剩余所有空间，无布局报错。

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