Flutter 中的紧约束与松约束有什么区别

Question

经常听到一些约束是tight 或loose，所以有必要知道这意味着什么。

紧

BoxConstraints.tight(
  Size size
)

VS

松散

BoxConstraints.loose(
  Size size
)

什么是紧约束和松约束，它们之间有什么区别？

Answer 1

约束是tight，意味着它们没有空间让渲染框决定大小，约束是loosen，意味着保持最大值但移除最小值。这是一个完整的解释：

紧

当一个小部件告诉其子级它必须具有特定大小时，我们说该小部件为其子级提供tight 约束。

tight 约束提供了一种可能性，即精确的大小。换句话说，一个紧约束的最大宽度等于它的最小宽度；并且它的最大高度等于它的最小高度。

如果您转到 Flutter 的 box.dart 文件并搜索 BoxConstraints constructors，您会发现以下内容：

BoxConstraints.tight(Size size)
   : minWidth = size.width,
     maxWidth = size.width,
     minHeight = size.height,
     maxHeight = size.height;

下面的示例告诉我们屏幕强制红色的Container 与屏幕的大小完全相同。当然，屏幕会绕过对Container 的严格限制。

Container(width: 100, height: 100, color: Colors.red)

红色的Container 想要为 100 × 100，但它不能，因为屏幕会强制它与屏幕的大小完全相同。

所以Container 填满了屏幕。

松散

当一个小部件告诉其子级它可以小于某个大小时，我们说该小部件为其子级提供了loose 约束

另一方面，宽松的约束设置最大宽度和高度，但允许小部件尽可能小。换句话说，松散约束的最小宽度和高度都等于零：

BoxConstraints.loose(Size size)
   : minWidth = 0.0,
     maxWidth = size.width,
     minHeight = 0.0,
     maxHeight = size.height;

下面的示例告诉我们，Center 让红色 Container 比屏幕更小但不大于屏幕。当然，Center 会绕过对 Container 的松散约束。最终，Center 的目的是将其从父级（屏幕）获得的严格约束转换为对其子级（容器）的宽松约束。

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

屏幕强制Center 与屏幕大小完全相同，因此Center 会填满屏幕。

Center 告诉Container 它可以是任意大小，但不能大于屏幕。现在Container 确实可以是 100 × 100。