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

Question

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

紧张

BoxConstraints.tight(
  Size size
)

VS

宽松

BoxConstraints.loose(
  Size size
)

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

Answer 1

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

紧

当小部件告诉其 child 它必须具有特定大小时，我们说该小部件为其 child.

提供 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 填满了屏幕。

宽松

当一个小部件告诉它 child 它可以小于某个尺寸时，我们说这个小部件为其 child

提供 loose 约束

另一方面，宽松的约束设置了最大宽度和高度，但让小部件尽可能小。换句话说，松散约束的 minimum 宽度和高度都等于 zero:

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

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

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

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

Center 告诉 Container 它可以是它想要的任何尺寸，但不能大于屏幕。现在 Container 确实可以是 100 × 100。

What is the difference between Tight vs loose constraints in Flutter