Flutter中Row内Expanded的Container无法垂直填充行高问题

直接给Row设置crossAxisAlignment: CrossAxisAlignment.stretch，就能让所有Expanded子项自动填充Row的全部高度（由换行文本撑开的高度），完全不需要用IntrinsicHeight，也无需给Container设置double.infinity高度。

示例代码 #

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 核心配置
  children: [
    Expanded(
      child: Container(
        color: Colors.orange,
        alignment: Alignment.center, // 可选：控制文本垂直对齐方式
        child: Text("短文本1"),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        alignment: Alignment.center,
        child: Text("超长文本超长文本超长文本超长文本超长文本超长文本超长文本"),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        alignment: Alignment.center,
        child: Text("短文本2"),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.purple,
        alignment: Alignment.center,
        child: Text("短文本3"),
      ),
    ),
  ],
)

原理说明 #

• Row默认的crossAxisAlignment是CrossAxisAlignment.center，此时每个子项的高度仅由自身内容决定，所以短文本Container不会填充Row的整体高度。
• 设置CrossAxisAlignment.stretch后，Row会强制所有子项的高度等于Row自身的高度（Row的高度由其中最高的子项，也就是换行的文本Container决定），Expanded会自动让子Container填满这个高度。
• 如果需要调整文本在Container内的垂直位置，直接用Container的alignment属性即可（比如Alignment.topLeft让文本置顶，Alignment.bottomCenter让文本靠下）。

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