为什么Flutter Container在其他Container内时不遵守其宽度和高度限制

Question

Container(
  width: 200.0,
  height: 200.0,
  child: Container(
    width: 50.0,
    height: 50.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red
    ),
  ),
)

我一直在尝试在Container类文档中找到答案，但没有找到答案。

Answer 1

布局内的所有视图必须有四个约束：

1. 宽度
2. 高度
3. X位置
4. Y位置

这适用于Android、IOS、Flutter等。

在代码中，内部容器只有宽度和高度，因此它不知道从哪里开始绘制并且获得所有可用空间。

但是，如果内部容器放置在另一个与其子级对齐的布局小部件内，例如Center. 它将获得其 x 和 y 位置。

Container(
   decoration : BoxDecoration(color : Colors.green),
   width: 200.0,
   height: 200.0,
   child: Center(
        child: Container(
          width: 50.0,
          height: 50.0,
          decoration: BoxDecoration(
                      shape: BoxShape.circle,
                       color: Colors.red
                    ),
            ),
        )
)

内容器为红色，外容器为绿色。

Answer 2

Flutter中的约束工作原理与平常有所不同。小部件本身没有约束。

当在width/ height上指定/ 时Container，就没有限制Container。你限制了孩子的Container。

Container 然后将根据其子项的大小自行调整大小。

因此，父级窗口小部件始终对如何确定其后代的大小起最后作用。

如果要解决此问题，则必须使用Align小部件：

Container(
  width: 200.0,
  height: 200.0,
  child: Align(
    alignment: Alignment.topLeft,
    child: Container(
      width: 50.0,
      height: 50.0,
      decoration:
          BoxDecoration(shape: BoxShape.circle, color: Colors.red),
    ),
  ),
);

这可能看起来很奇怪和有限。但是这种怪异是Flutter的布局如此强大且可组合的原因。