为什么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

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

Answer 2

请记住，设置容器的宽度或高度，与同时设置min-width和max-width或min-height和max-height相同。

根据文档，内部Container的情况是：

如果该窗口小部件没有子代且没有对齐方式，但是提供了高度，宽度或约束，则考虑到这些约束和父代约束的组合，容器将尝试尽可能小。

由于外部容器对内部容器施加了minWidth = minHeight = 200约束，因此内部容器的大小不能小于Size（200，200）。

---

为支持RémiRousselet的回答，与Center小部件相同的Align小部件将展开以适合其父级的约束（如果其父级有约束），并将其子级放置在指定的对齐方式中。

如果小部件具有alignment，约束，并且父级提供有界约束，则在考虑到这些约束的组合的情况下，Container会尽量减小和父母的约束条件，然后按照alignment将孩子置于自己的位置。

在这种情况下，外部Container具有一个Align窗口小部件，作为子级（对齐），约束，并且父级提供有界约束，因此，鉴于其约束和父级约束的组合，它会尽量缩小，就是Size(200, 200)。

您可能想知道为什么内部容器的大小为50*50，而不是200*200，因为其父（外部容器）指定了minWidth=minHeight = 200。原因是，如前所述，“对齐”小部件将扩展以适合其父级约束，因此在这种情况下，“对齐”小部件将扩展为适合外部Container的约束，即其大小为{{1 }}，并告知其子级（内部Container），它可以是所需的任何大小，但不能大于我的大小Size(200, 200)。因此，应该传递给内部容器的外部容器的minWidth和minHeight信息丢失。

Answer 3

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

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
                    ),
            ),
        )
)

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