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

为什么您的BoxConstraint被忽略？

Container在内部创建一个ConstrainedBox以强制执行约束。 ConstrainedBox的{​​{1}}-RenderObject-然后尝试尽可能地遵守您的约束。

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

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的约束只会得到尽可能多的尊重。 由于需要填充整个屏幕，因此Container被迫接受严格的屏幕约束，从而忽略了您的约束。

该怎么做

要使Container遵守您的约束，您必须给它更多的“呼吸空间”，即不要强迫它充满屏幕。 一种简单的解决方案是将其包装在Container中，但这取决于您对Center对齐位置的偏好。