Flutter Column布局中如何让第三个子组件占满剩余高度 其余子组件适配内容高度

直接给第二个、第四个组件移除Expanded包裹即可，逻辑非常简单：
Expanded本身的作用就是在Flex类布局（Column/Row都属于Flex布局）的主轴方向抢占剩余可用空间，你给第二、第四个组件也套了Expanded，自然会和第三个组件一起瓜分Column的剩余高度，导致第二、第四个的高度超出自身内容所需。
你需要的效果只需要仅给第三个组件套Expanded，其余所有组件都不套伸缩类组件，它们会自动按照自身内容的高度渲染，Column剩下的所有可用高度都会被第三个组件占满，不会出现溢出，也不会出现第二、第四个组件高度异常的问题。
正确代码示例：

Column(
  children: [
    // 第一个固定高度组件
    SizedBox(
      height: 60.0,
    ),
    // 第二个组件：无需套Expanded，高度随内容自适应
    Container(
      child: Text("第二个组件的内容"),
    ),
    // 第三个组件：唯一套Expanded，占满全部剩余高度
    Expanded(
      child: Container(
        color: Colors.lightBlue,
        // 此处放第三个组件的内容
      ),
    ),
    // 第四个组件：无需套Expanded，高度随内容自适应
    Container(
      child: Text("第四个组件的内容"),
    ),
    // 第五个固定高度组件
    SizedBox(
      height: 60.0,
    ),
  ],
)

如果第三个组件的内容本身高度超出分配给它的可用高度，你可以给Expanded的child套一层SingleChildScrollView实现滚动，避免内容溢出：

Expanded(
  child: SingleChildScrollView(
    child: Container(
      // 第三个组件的长内容，超出时可滚动
    ),
  ),
)

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