Flutter笔记：Box协议的布局约束原理与应用
作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/133438386
【姊妹篇】
- 《Sliver布局协议原理与应用》
- 《布局过程与RenderObject》
- 《Flutter的Sliver布局协议中的约束原理》
目 录
- 1. 概述
- 2. Flutter中的布局约束原理
- 2.1 约束的上下传递
- 2.1.1 向下传递约束
- 2.1.2 向上传递尺寸
- 2.2 宽约束和紧约束
- 2.2.1 紧约束
- 2.2.2 宽约束
- 2.3 如何计算布局约束
- 3. 常见的布局约束组件
- 4. 打破约束的组件
1. 概述
在Flutter中，布局约束是决定组件大小和位置的关键因素。理解布局约束的原理，熟悉常见的布局约束组件，以及知道如何在实际应用中使用布局约束，对于创建优秀的Flutter应用至关重要。
本文将详细讲解Flutter中的布局约束原理，包括约束的上下传递，宽约束和紧约束等。我们将介绍常见的布局约束组件，例如Container，BoxConstraints，AspectRatio等，以及如何使用这些组件来创建复杂的布局。我们还将探讨如何使用特定的组件来突破布局约束，例如OverflowBox，SizedBox等。
2. Flutter中的布局约束原理
在Flutter中，布局约束是决定组件大小和位置的关键因素。布局约束的原理主要包括约束的上下传递，宽约束和紧约束等。
2.1 约束的上下传递
在Flutter中，布局约束的传递是一个从上到下的过程。这个过程可以分为两个步骤：向下传递约束 和 向上传递尺寸。
2.1.1 向下传递约束
在布局过程的开始，根组件（通常是Flutter应用的MaterialApp或CupertinoApp组件）会接收到一个来自系统的初始约束。这个初始约束通常是一个宽约束，表示Flutter应用可以在设备屏幕上占用的最大空间。
然后，根组件会根据自己的特性和需求，对这个初始约束进行调整，生成一个新的约束，然后将这个新的约束传递给它的子组件。
子组件接收到父组件传递的约束后，也会进行类似的处理：
- 根据自己的特性和需求，调整接收到的约束，生成一个新的约束；
- 然后将这个新的约束传递给它的子组件。
- 这个过程会一直持续，直到所有的组件都接收到了约束。
2.1.2 向上传递尺寸
当一个组件接收到约束后，它会根据约束来确定自己的尺寸。组件可以自由地选择自己的尺寸，只要这个尺寸满足接收到的约束。
然后，组件会将自己的尺寸传递给父组件。父组件接收到子组件的尺寸后，会根据子组件的尺寸来确定自己的尺寸。这个过程会一直持续，直到所有的组件都确定了自己的尺寸。
2.2 宽约束和紧约束
在 Flutter 中，布局约束分为 宽约束（Loose Constraints）和 紧约束（Tight Constraints）。这两种约束都包括最小宽度（minWidth）、最大宽度（maxWidth）、最小高度（minHeight）和最大高度（maxHeight）之间的关系，但它们对组件的尺寸要求不同。
2.2.1 紧约束
紧约束表示布局系统在一个组件的尺寸方面要求非常严格。具体而言，对于紧约束，以下关系必须成立：
minWidth <= Size.width <= maxWidth
minHeight <= Size.height <= maxHeight
这意味着组件必须尽量占据尽可能少的空间。紧约束通常用于指示一个组件不应该超出其最小可接受大小的情况。在这种情况下，布局系统会为组件提供尽可能接近其最小大小的空间。
例如，BoxConstraints.tight(Size(100, 100))创建了一个紧约束，要求组件的宽度和高度都必须是100。
2.2.2 宽约束
宽约束表示布局系统允许组件使用更多的可用空间，使其尺寸变得更大。具体而言，对于宽约束，以下关系仍然成立，但布局系统允许组件占据更多的可用空间，而不一定完全使用：
minWidth <= Size.width <= maxWidth
minHeight <= Size.height <= maxHeight
宽约束通常用于指示组件可以根据可用空间的大小进行扩展。在这种情况下，布局系统会为组件提供尽可能多的可用空间，但不会强制组件占据所有可用的空间。
例如，BoxConstraints(minWidth: 0, maxWidth: double.infinity)创建了一个宽约束，允许组件在0到无穷大的范围内选择自己的宽度。
2.3 如何计算布局约束
在 Flutter 中，布局约束的计算是通过 layout 方法进行的。layout 方法是 RenderObject 类的一个方法，所有的组件最终都会被转换为 RenderObject。
layout方法接收一个BoxConstraints对象，这个对象描述了组件可以接受的最小和最大宽度和高度。layout 方法需要计算出组件的大小，并返回一个Size对象。
以下是layout方法的基本步骤：
-
首先，
layout方法会检查传入的 BoxConstraints 对象，确保它是有效的。如果 BoxConstraints 对象无效（例如，最大宽度小于最小宽度），layout方法会抛出一个异常。 -
然后，
layout方法会调用performLayout方法。performLayout方法是 RenderObject 类的一个抽象方法，每个 RenderObject 子类都需要实现这个方法。在performLayout方法中，RenderObject 会根据传入的 BoxConstraints 对象来计算自己的大小。 -
performLayout方法计算出 RenderObject 的大小后，会将这个大小保存在 RenderObject 的size属性中。然后，layout方法会返回这个size属性。
3. 常见的布局约束组件
在Flutter中，有许多组件可以用来设置和调整布局约束。以下是一些常见的布局约束组件：
3.1 Container
Container 是一个方便的组合组件，它可以同时设置多种布局属性，包括宽度、高度、边距、填充、装饰等。Container组件的width和height属性可以用来设置宽约束和紧约束。
例如，以下代码创建了一个宽度和高度都为100的Container组件：
Container(width: 100,height: 100,color: Colors.red,
)
3.2 BoxConstraints
**BoxConstraints ** 是一个描述布局约束的对象。我们可以使用 BoxConstraints 对象来创建宽约束和紧约束。
例如，以下代码创建了一个最小宽度为50，最大宽度为150，最小高度为100，最大高度为200的 BoxConstraints 对象：
BoxConstraints(minWidth: 50,maxWidth: 150,minHeight: 100,maxHeight: 200,
)
3.3 AspectRatio
AspectRatio 组件可以用来设置组件的宽高比。AspectRatio 组件的 aspectRatio 属性表示宽度和高度的比例。
例如，以下代码创建了一个宽高比为16:9的AspectRatio组件：
AspectRatio(aspectRatio: 16 / 9,child: Image.network('https://example.com/image.jpg'),
)
以上就是 Flutter 中常见的布局约束组件。理解这些组件的作用和使用方法，对于理解和使用 Flutter 的布局系统至关重要。
4. 打破约束的组件
在 Flutter 中，可以使用 OverflowBox 和 UnconstrainedBox 等组件来打破约束。
4.1 OverflowBox
OverflowBox 组件可以用来突破父组件的约束，允许子组件根据自己的大小进行布局，即使这个大小超出了父组件的约束。
例如，以下代码创建了一个 OverflowBox 组件，它的子组件是一个宽度和高度都为 300 的 Container组件，即使这个大小超出了父组件的约束：
OverflowBox(minWidth: 0.0, minHeight: 0.0,maxWidth: double.infinity,maxHeight: double.infinity,child: Container(width: 300,height: 300,color: Colors.red,),
)
4.2 UnconstrainedBox
UnconstrainedBox 组件不会对其子组件施加任何约束，允许子组件根据自己的大小进行布局。
例如，以下代码创建了一个 UnconstrainedBox 组件，它的子组件是一个宽度和高度都为300的 Container 组件，即使这个大小超出了父组件的约束：
UnconstrainedBox(child: Container(width: 300,height: 300,color: Colors.red,),
)
4.3 SizedOverflowBox
SizedOverflowBox 组件有一个size属性，它可以强制其子组件具有特定的宽度和高度，即使这个宽度和高度超出了父组件的约束。同时，它允许其子组件溢出其设定的尺寸。
例如，以下代码创建了一个 SizedOverflowBox 组件，它的 size 属性被设置为 Size(100, 100)，但它的子组件是一个宽度和高度都为 300 的 Container 组件，即使这个大小超出了 SizedOverflowBox 设定的尺寸：
SizedOverflowBox(size: Size(100, 100),child: Container(width: 300,height: 300,color: Colors.red,),
)
在这个例子中，Container 组件的尺寸超出了 SizedOverflowBox 设定的尺寸，但 SizedOverflowBox 允许这种溢出。