小部件的自定义宽度/高度属性被忽略

Question

有时我想强制小部件采用特定大小，我通常使用SizedBox/ConstrainedBox/Container

但我意识到，在某些情况下，小部件只是忽略它并采用不同的大小。这是为什么呢？

例子：

预期行为：

实际行为：

Answer 1

当父母和它的孩子想要两种不同的尺寸时，就会发生这种情况；但是父级不知道它应该如何在其边界内对齐其子级。

以下代码没有提供足够的信息来说明如何将红框与蓝框对齐：

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Container(
    color: Colors.red,
    width: 24,
    height: 24,
  ),
),

所以虽然它可以这样居中：

期望以下对齐也是完全合理的：

---

在这种情况下，由于 Flutter 不知道如何对齐红框，它会采用更简单的解决方案：

不要对齐红框，强行占用所有可用空间；这导致：

---

要解决这个问题，解决方案是明确告诉 Flutter 如何在其父边界内对齐子节点。

最常见的解决方案是将孩子包装到 Align 小部件中：

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Align(
    alignment: Alignment.center,
    child: Container(
      color: Colors.red,
      width: 24,
      height: 24,
    ),
  ),
),

诸如Container 或Stack 之类的一些小部件也将提供alignment 属性来实现类似的行为。