一文彻底理解Flutter布局约束，Android移动应用开发案例

Align(

alignment: Alignment.bottomRight,

child: Container(width: 100, height: 100, color: red),

)

与上一个样例不同的是，我们使用了 Align 而不是 Center。

Align 同样也告诉 Container，你可以变成任意大小。但是，如果还留有空白空间的话，它不会居中 Container。相反，它将会在允许的空间内，把 Container 放在右下角（bottomRight）。

样例5

---

Center(

child: Container(

width: double.infinity, height: double.infinity, color: red),

)

屏幕强制 Center 变得和屏幕一样大，所以 Center 充满屏幕。

然后 Center 告诉 Container 可以变成任意大小，但是不能超出屏幕。现在，Container 想要无限的大小，但是由于它不能比屏幕更大，所以就仅充满屏幕。

样例6

---

Center(

child: Container(color: red),

)

屏幕强制 Center 变得和屏幕一样大，所以 Center 充满屏幕。

然后 Center 告诉 Container 可以变成任意大小，但是不能超出屏幕。由于 Container 没有子级而且没有固定大小，所以它决定能有多大就有多大，所以它充满了整个屏幕。

但是，为什么 Container 做出了这个决定？非常简单，因为这个决定是由 Container widget 的创建者决定的。可能会因创造者而异，而且你还得阅读 Container 文档 来理解不同场景下它的行为。

样例7

---

Center(

child: Container(

color: red,

child: Container(color: green, width: 30, height: 30),

),

)

屏幕强制 Center 变得和屏幕一样大，所以 Center 充满屏幕。

然后 Center 告诉红色的 Container 可以变成任意大小，但是不能超出屏幕。由于 Container 没有固定大小但是有子级，所以它决定变成它 child 的大小。

然后红色的 Container 告诉它的 child 可以变成任意大小，但是不能超出屏幕。

而它的 child 是一个想要 30 × 30 大小绿色的 Container。由于红色的 Container 和其子级一样大，所以也变为 30 × 30。由于绿色的 Container 完全覆盖了红色 Container，所以你看不见它了。

样例8

---

Center(

child: Container(

padding: const EdgeInsets.all(20.0),

color: red,

child: Container(color: green, width: 30, height: 30),

),

)

红色 Container 变为其子级的大小，但是它将其 padding 带入了约束的计算中。所以它有一个 30 x 30 的外边距。由于这个外边距，所以现在你能看见红色了。而绿色的