为什么颤振容器在其他容器内时不遵守其宽度和高度限制

Question

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

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

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

Answer 1

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

在容器上指定宽度/高度时，并不是在约束容器。您正在约束容器的子容器。

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

如果要解决这个问题，必须使用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的布局如此强大和可组合的原因。