Flutter嵌套Container子组件尺寸异常及alignment作用疑问

问题代码 #

Container(
  color: Colors.green,
  width: 300,
  height: 300,
  child: Container(
    color: Colors.purple,
    width: 200,
    height: 200,
  ),
),

现象解释 #

1. 未添加 alignment 时的行为
   当父 Container 没有设置 alignment 属性时，它会将自身的宽高约束（300×300）直接传递给子组件。此时子 Container 声明的 width:200 和 height:200 会被父容器的约束覆盖，子组件会被强制拉伸填充整个父容器的可用空间，所以视觉上子容器和父容器尺寸完全一致。

2. 添加 alignment: Alignment.center 后的行为
   一旦给父 Container 设置了 alignment 属性，它的布局逻辑会发生变化：

• 不再强制子组件继承自身约束，而是允许子组件使用自己声明的尺寸（200×200）
• 随后将子组件按照指定的对齐方式（这里是居中）放置在父容器内部
  这就得到了你预期的布局效果：紫色子容器以200×200的尺寸显示在绿色父容器的中心。

效果对比 #

• 未添加 alignment：
• 添加 alignment：

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