布局原理

每个组件在渲染之前的布局过程具体可分为两个线性过程。首先从组件顶部向下传递布局约束，然后从底部向上传递布局信息。

这两个线性过程会在元素树所引用的RenderObject树中完成，并且最终的布局信息将保存在RenderObject中。因此，当重新构建组件时，如果元素和RenderObject能够复用，那么同样可以使用和上次一样的布局信息。这种单向传递和保存信息的方式是Flutter布局性能优于其他框架的重要原因之一。

RenderObject树由一个个RenderObject组合而成。当Element实例挂载到元素树上后，就会调用组件的createRenderObject()方法生成对应的RenderObject。由于RenderObject树被元素树引用，并且主要任务就是帮助Element实例做具体的渲染工作，因此RenderObject树也常称为元素树的子树。

每个RenderObject会被元素持有，并且在组件重建后会尽量复用，每当元素中的状态发生改变时，就会调用组件的updateRenderObject()方法更新渲染对象，屏幕上的值最终得以更新。

RenderObject类中提供了很多与布局密切相关的对象和方法，如下所示。

• constraints对象，从父组件中传递过来的约束对象。
• parentData对象，从子组件传递来的具体布局信息。
• performLayout()方法，负责具体的布局逻辑。
• paint方法，绘制组件和它的子组件。

RenderObject是一个抽象类，每种Element都会指向不同类型的渲染对象，继承自RenderOject的两个主要的类是RenderBox和RenderSliver，它们分别使用盒子协议和滑动协议来做布局工作。基于这两个类，Flutter还提供了许多处理特定场景的渲染类，如RenderShiftedBox和RenderStack等。

布局约束 1 —— 盒子协议

box protocol 用于静态布局

父节点传递给其子节点的约束是一个BoxConstraints对象。这种约束对象内部有4个属性，分别用来规定每个子节点的最大和最小宽度与高度。这种约束会一直向下延伸，子组件也会产生约束，再传递给它下面的子组件，这个过程一直延续到组件树最下面的叶子节点。

比如，父节点传入了MinWidth=150像素，MaxWidth=350像素，MinHeight=100像素，MaxHeight=double.infinity（尽可能大）的BoxConstraints对象。

子组件接收到这个约束后，便会根据BoxConstraints对象取得上图中指定范围内的值，即宽度介于150～350像素，高度大于或等于100像素。当取得具体的值之后，就会将值向上传递给父组件，父组件会根据这些信息确定子组件的位置，再对它做具体的布局操作，这样就达到了父子组件间的布局通信。


组件接收到盒子布局约束后，会分3种情况设置宽度和高度：

1. 尽可能大地扩展宽度和高度，即总是取布局约束的最大值，如Center、ListView组件
2. 组件会尽量选择最小值并与它的子组件（如Opacity）的最大宽度、高度相等。
3. 像Text、Image这类属于叶子节点的组件会以固定尺寸渲染。

自定义盒子布局约束

使用 ConstrainedBox 组件

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 150.0,    // 最大宽度
    maxHeight: 70.0,    // 最大高度
  ),
  child: Container(
    color: Colors.lightBlue,
  ),
)

传递给子组件Container一个最大宽度为150.0像素、最大高度为70.0像素的盒子约束。由于Container在没有子组件的情况下会根据布局约束尽可能大扩展宽度和高度，因此Container的宽度会自动设置为150像素，高度会自动设置为70像素。

布局约束 2 —— 滑动协议

sliver protocol 用于滚动布局

滚动组件里的每个子组件都被定义为一个sliver组件，父组件传递的约束对象为SliverConstraints，该对象不仅记录了视图的滚动方向、遗留空间等信息，还为每个Sliver组件提供了它们在滚动布局中的偏移量。

如上图中的浅黄色的高亮组件，当偏移量为0像素时，在滚动布局边缘完全展示出来。


所以，滚动布局中的组件分为3种：

1. 当前显示在布局中的组件
2. 已经滚动出屏幕的组件
3. 还未滚动到屏幕下方的组件。