Flutter如何让子Widget适配父级可变高度并解决Expanded高度无界报错

你遇到的报错如下：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

本质原因是Expanded只能在拥有明确尺寸约束的Column/Row（Flex容器）中使用。你直接给蓝色Container3套Expanded时，它的父级Column处于无高度约束的Row内，Column默认会纵向无限延伸，Expanded无法计算可分配的高度，因此抛出异常。

核心思路是让Row的高度自动跟随右侧高度可变的黄色容器确定，再让左侧蓝色容器填充剩余高度，三步即可实现：

1. 在包含左右两部分的Row外层包裹IntrinsicHeight组件，强制Row的高度匹配内部最高子元素（即黄色容器）的高度，给Row提供明确的高度约束
2. 将Row的crossAxisAlignment属性从CrossAxisAlignment.start修改为CrossAxisAlignment.stretch，让Row的所有子元素都填充满Row的高度
3. 给左侧蓝色Container3外层套Expanded，此时父级Column已有明确高度约束，Expanded可正常填充剩余高度

提示：IntrinsicHeight会多一次布局计算，若你的场景中黄色容器高度变化频率不高，该方案完全够用，无明显性能影响。

return Scaffold(
  body: SafeArea(
    child: Column(
      children: <Widget>[
        Container(
          color: Colors.deepOrange[50],
          child: Column(
            children: [
              // 新增IntrinsicHeight包裹Row
              IntrinsicHeight(
                child: Row(
                  // 修改crossAxisAlignment为stretch
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(
                      width: 50,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Container(
                            padding: EdgeInsets.all(2),
                            color: Colors.red,
                            width: double.infinity,
                            child: Text("1"),
                          ),
                          Container(
                            padding: EdgeInsets.all(2),
                            color: Colors.green,
                            width: double.infinity,
                            child: Text("2"),
                          ),
                          // 蓝色Container3套Expanded
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.all(2),
                              color: Colors.blue,
                              width: double.infinity,
                              child: Text("3"),
                            ),
                          ),
                        ],
                      )
                    ),
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                        decoration: BoxDecoration(
                          color: Colors.amberAccent,
                          borderRadius: BorderRadius.all(Radius.circular(5))
                        ),
                        child: Column(
                          children: [
                            Text("---"),
                            Text("Variable"),
                            Text("Height"),
                            Text("---"),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        )
      ],
    ),
  ),
);

当前实现效果：

期望实现效果：

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