小部件的自定义width / height属性将被忽略

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属性以实现类似的行为。