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

问题内容：

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

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

更新：

很长一段时间后，我了解了这个问题。

布局内的所有视图必须具有宽度，高度，x位置和y位置。（这适用于Android，IOS，Flutter等）

在我的代码中，内部容器仅具有宽度和高度，因此它不知道从哪里开始绘制。

因此，如果将容器放置在Alignment小部件内，则容器将获得x位置和y位置，并且可以正常工作。

问题答案：

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的布局如此强大且可组合的原因。

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

微信关注