Flutter中如何让Column的单个子组件填充宽度？

如果不想给整个Column设置CrossAxisAlignment.stretch（会让所有子组件占满宽度），可以用以下两种方式实现单个子组件填充Column的可用宽度：

方法一：用Container包裹目标子组件，设置宽度为无穷大 #

给需要占满宽度的子组件套一层Container，并设置width: double.infinity，这样该组件会自动填充Column的水平可用空间，其他子组件保持原有对齐方式。

示例代码：

Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 其他子组件默认左对齐
  children: [
    Text("普通文本，仅包裹内容"),
    Container(
      width: double.infinity,
      color: Colors.lightBlueAccent,
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Text("这个组件填充Column的全部宽度"),
    ),
    ElevatedButton(onPressed: () {}, child: Text("普通按钮")),
  ],
)

如果需要让Container内的子组件居中，可以额外添加alignment: Alignment.center属性。

方法二：Column设置stretch，用Align包裹不需要占满的子组件 #

如果大部分子组件需要占满宽度，仅少数不需要，可先给Column设置crossAxisAlignment: CrossAxisAlignment.stretch，再用Align组件包裹不需要占满宽度的子元素，指定其对齐方向（如左对齐、居中）。

示例代码：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Align(
      alignment: Alignment.centerLeft,
      child: Text("左对齐，不占满宽度"),
    ),
    Container(
      color: Colors.lightGreenAccent,
      child: Text("自动填充Column宽度"),
    ),
    Align(
      alignment: Alignment.center,
      child: ElevatedButton(onPressed: () {}, child: Text("居中显示的按钮")),
    ),
  ],
)

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