Flutter Container 的 BoxConstrains 没有按预期工作

Question

这是代码

return MaterialApp(
  home: Container(
    constraints: BoxConstraints.tight(Size(100, 100)),
    decoration: BoxDecoration(color: Colors.yellow),
    child: Card(child: Text('Hello World')),
  ),
);

我期望 Card 是 100 x 100，但它不是，它只是延伸到整个屏幕。为什么会这样？

Answer 1

Flutter 团队发布了一篇名为 "Understanding constraints" 的精彩文章，如果您不确定约束的工作原理，那绝对值得一读。话虽如此，这里有一个更深入的专门针对您的问题的答案：

为什么你的 BoxConstraint 被忽略了？

Container 内部创建了一个 ConstrainedBox 以强制执行您的约束。 ConstrainedBox 的 RenderObject - RenderConstrainedBox - 然后会尽可能地遵守您的限制。

在布局期间，执行以下代码taken from the RenderConstrainedBox implementation。成员 minWidth、maxWidth、minHeight 和 maxHeight 源于您给定的约束，而 constraints 是由 Flutter 框架提供的约束（在您的情况下，屏幕尺寸）。

BoxConstraints(
  minWidth: minWidth.clamp(constraints.minWidth, constraints.maxWidth),
  maxWidth: maxWidth.clamp(constraints.minWidth, constraints.maxWidth),
  minHeight: minHeight.clamp(constraints.minHeight, constraints.maxHeight),
  maxHeight: maxHeight.clamp(constraints.minHeight, constraints.maxHeight)
)

由于屏幕大小不灵活，所以constraints比较紧，意思是constraints.minWidth == constraints.maxWidth和constraints.minHeight == constraints.maxHeight。这会强制 clamp 忽略您的约束（例如，2.clamp(3,3) == 3）。

所以你有它：您对 Container 的约束只会尽可能得到尊重。因为需要填满整个屏幕，所以Container被迫接受严格的屏幕约束，从而忽略你的约束。

怎么办

为了让 Container 能够遵守您的约束，您必须给它更多 "breathing room"，即不要强迫它填满屏幕。一个简单的解决方案是将其包装在 Center 中，但这取决于您对 Container 应对齐位置的偏好。

Flutter Container 的 BoxConstrains 没有按预期工作

Flutter Container's BoxConstrains not working as expected

flutter

flutter-layout