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

Question

tight听到某些约束是or是很常见的loose，因此有必要知道这意味着什么。

紧的

BoxConstraints.tight(
  Size size
)

VS

松动的

BoxConstraints.loose(
  Size size
)

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

标签： flutterdartflutter-layoutlooseflutter-constraint

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(
   child: Container(width: 100, height: 100, color: Colors.red)
)

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

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