Dart 为什么颤振容器位于其他容器内时不遵守其宽度和高度约束

我一直试图在容器类文档中找到答案，但没有找到

更新：

过了很长时间，我明白了这个问题

---

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

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

---

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

颤振中的约束与通常的工作方式略有不同。 小部件本身没有约束

在

容器

上指定

宽度

/

高度

时，您没有约束

容器

。您正在约束

容器

的子项

容器将根据其子容器的大小调整自身大小

因此，父窗口小部件始终对其子部件的大小有最终决定权

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

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


这似乎很奇怪，也很有限。但这一独特之处正是颤振布局如此强大和可组合的原因。
请记住，设置容器的宽度或高度与同时设置最小宽度和最大宽度或最小高度和最大高度相同

根据文件规定，您的内部零件箱应为：

如果小部件没有子部件，也没有对齐方式，但是提供了高度、宽度或约束，那么容器将在考虑这些约束和父约束的组合时尽量小

由于外部容器为内部容器提供了minWidth=minHeight=200约束，因此内部容器的大小不能小于size（200200）


为了支持Rémi Rousselet的回答，Align小部件（与
Center
小部件相同）将展开以适应其父对象的约束（如果其父对象具有约束），并将其子对象定位在指定的对齐方式中

如果小部件具有，约束，并且父部件提供有界约束，则在给定这些约束和父部件约束的组合的情况下，将尝试尽可能小，然后根据将子部件放置在其自身内

在这种情况下，外部容器有一个Align小部件作为子对象（对齐）、约束，而父对象提供有界约束，因此，考虑到其约束和父对象约束的组合，它会尝试尽可能小，即
Size（200200）

您可能想知道为什么内部容器的大小是
50*50
，而不是
200*200
，因为其父容器（外部容器）指定了
minWidth=minHeight=200
。原因是，如前所述，Align小部件将展开以适应其父约束，因此在这种情况下，Align小部件将展开以适应外部
容器的约束，即它的大小将为
大小（200，200）
，并告诉它的子容器（内部容器），它可以是它想要的任何大小，但不要比我的尺码大，
200*200
。因此，应该传递给内部容器的外部容器的最小宽度和最小高度信息丢失。
布局内的所有视图必须具有四个约束：

宽度
高度
X位置
Y位置
这适用于Android、IOS、Flatter等

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

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

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


内部容器是红色的，外部容器是绿色的。
您是从哪里获得这些知识的？我一直在看文件，但我没有找到任何类似的。特别是这样：“当您在容器上指定宽度/高度时，您并不是在约束容器，而是在约束容器的子级”，您可以找到正确的方法。容器将其宽度/高度属性与其约束（如果已设置）相结合以约束其子级。这不是特定于容器的。它适用于所有颤振小部件。我不认为有任何关于这方面的文档，我是根据经验看到的，并且查看源代码，请将“更新”部分作为答案。这是一个有价值的信息，我可以用它解释所有布局的复杂性。谢谢。谢谢你的更新！非常有用的问题和答案
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
                    ),
            ),
        )
)