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 团队发布了一篇名为“理解约束”的精彩文章，如果您不确定约束是如何工作的，那绝对值得一看。话虽如此，这里有一个更深入的答案，专门针对您的问题：

为什么你的BoxConstraints 会被忽略？

在Container内部创建一个ConstrainedBox以加强你的约束。该ConstrainedBox的RenderObject-一个RenderConstrainedBox-然后尝试坚持你的限制，尽可能。

在布局期间，从RenderConstrainedBox实现中提取的以下代码将被执行。成员minWidth，maxWidth，minHeight并maxHeight从给定的约束干，而constraints由扑框架提供的约束（在你的情况下，屏幕大小）。

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）。

这样你就明白了：你给 a 的约束Container只会尽可能多地得到尊重。因为需要填满整个屏幕，所以Container被迫采取严格的屏幕约束，从而忽略您的约束。

该怎么办

为了使其能够Container尊重您的约束，您必须给它更多的“喘息空间”，即不要强迫它填满屏幕。一个简单的解决方案是将其包装在 a 中Center，但这取决于您对Container应该对齐的位置的偏好。