如何让Row Widget内子组件充满其全部宽高

要让Row中的所有子组件同时占满Row的全部宽高，只需两步调整：

核心修改点 #

• 给Row设置crossAxisAlignment: CrossAxisAlignment.stretch，强制所有子组件在垂直方向拉伸至Row的最大高度。
• 用Expanded包裹每个子Container，让它们在水平方向填充Row的可用空间。

示例代码 #

问题原代码（红、蓝Container未充满）：

Row(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green, child: Text('内容')),
  ],
)

修改后代码（所有Container充满Row宽高）：

// 若Row父组件无明确高度约束，需先给Row指定高度，比如用SizedBox
SizedBox(
  height: 200, // 可按需调整高度
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(child: Container(color: Colors.red)),
      Expanded(child: Container(color: Colors.blue)),
      Expanded(
        child: Container(
          color: Colors.green,
          child: Center(child: Text('内容')), // 可选：让文本居中显示
        ),
      ),
    ],
  ),
)

补充说明 #

• 若不需要子组件平分水平宽度，可改用Flexible替代Expanded，通过flex参数自定义宽度比例。
• 必须确保Row的父组件有明确高度约束（如固定高度、填充父组件高度），否则CrossAxisAlignment.stretch无法生效——因为Row本身高度默认由最高子组件决定。

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