Flutter框架分析（六）-Constraint

1. 前言

在Flutter框架分析（四）-RenderObject一文中，咱们简单介绍了Flutter中RenderObject布局的核心规则，Constraint向下，Size向上，父节点设置本节点的位置。在本文中，咱们会对这个规则进行详细解析。

2. 布局原则解析

RenderObject布局的核心规则的具体解读以下：

1. 一个Widget从它的父节点获取Constraint，并将其传递给子节点。
2. 该Widget对其子节点进行布局。
3. 最终，该节点告诉其父节点它的Size。

Flutter Framework对RenderObject Tree进行深度优先遍历。并将Constraint经过parent传给child的方式逐步向下传递。RenderObject为了计算自身的Size，RenderObject必须遵循其父节点传递下来的Constraint。对于某些依赖其子节点Size的RenderObject来讲，在计算其Size以前还须要获取其子节点的Size。所以RenderObject的Size会逐步向上传递。 该规则的示意图以下所示：

接下来，咱们将经过一个简单的例子来解析这个核心规则。

3. 示例

示例代码以下：

class Example3Test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(width: 100, height: 100, color: Colors.red),
    );
  }
}
复制代码

能够看到，这个代码很是简单，即在屏幕的中间画一个长宽均为100的红色方块。其图以下所示。

该示例对应的RenderObject Tree以下：

接下来，咱们将结合源码逐步讲解Constraint和Size传递的过程。

RenderView的performLayout函数以下：

@override
void performLayout() {
  assert(_rootTransform != null);
//将其大小设置为屏幕的大小
  _size = configuration.size;
  assert(_size.isFinite);

//将子节点的size设置为屏幕的size
  if (child != null)
    child.layout(BoxConstraints.tight(_size));
}
复制代码

能够看到，其Size是屏幕的大小(Size(392.7, 803.6))，并经过子RenderObject的layout函数，将一个固定为屏幕大小的Constraint(w=392.7, h=803.6)传递给子节点，即强制要求其子节点的Size也为屏幕的大小。

接下来，咱们看子节点RenderPositionedBox的performLayout函数。其源码以下：

void performLayout() {
  final BoxConstraints constraints = this.constraints;
  final bool shrinkWrapWidth = _widthFactor != null || constraints.maxWidth == double.infinity;
  final bool shrinkWrapHeight = _heightFactor != null || constraints.maxHeight == double.infinity;

  if (child != null) {
//传递constrains给子节点
    child.layout(constraints.loosen(), parentUsesSize: true);
//利用子节点大小计算本身的size
    size = constraints.constrain(Size(shrinkWrapWidth ? child.size.width * (_widthFactor ?? 1.0) : double.infinity,
                                          shrinkWrapHeight ? child.size.height * (_heightFactor ?? 1.0) : double.infinity));
//设置子节点parentData中的offset，用于绘制时确认子节点的位置
    alignChild();
  } else {
    size = constraints.constrain(Size(shrinkWrapWidth ? 0.0 : double.infinity,
                                          shrinkWrapHeight ? 0.0 : double.infinity));
  }
}
复制代码

能够看到，首先会经过constraints的loosen函数，将RenderView传递下来的Constraint(w=392.7, h=803.6)放宽至Constraint(0<=w<=392.7, 0<=h<=803.6)，并将其经过子节点的layout函数传递给子节点。

子节点在其performLayout函数中会计算出其Size，而后RenderPositionedBox根据该Size计算出本身的Size。子节点的performLayout会在接下来进行分析。

最后，根据RenderPositionedBox的Size和子节点的Size计算出子节点相对于RenderPositionedBox的位置，并将该值赋予子节点parentData的offset。

接下来，咱们分析RenderConstrainedBox的performLayout函数。其源码以下：

void performLayout() {
  final BoxConstraints constraints = this.constraints;
  if (child != null) {
//传递constrains给子节点
    child.layout(_additionalConstraints.enforce(constraints), parentUsesSize: true);
//利用子节点大小计算本身的size
    size = child.size;
  } else {
    size = _additionalConstraints.enforce(constraints).constrain(Size.zero);
  }
}
复制代码

首先，经过父节点传递过来的Constraint（constraints）和自身构造函数中传递的Constraint（_additionalConstraints）计算出子节点所需的Constraint，此例中Constraint是Constraint(w=100, h=100)。

而后，因为RenderConstrainedBox只是一个包含子节点的容器，将自身的Size设置为子节点的Size(100, 100)。

这里不须要设置子节点的parentData.offset，缘由是子节点会填充满RenderConstrainedBox，所以其子节点的parentData.offset就是offset(0,0)。

最后，咱们来看_RenderColoredBox的performLayout函数。 RenderColoredBox未重写performLayout函数，其函数调用关系以下：

最终会调用到RenderBox的performResize函数，其源代码以下：

void performResize() {
  // default behavior for subclasses that have sizedByParent = true
  size = constraints.smallest;
  assert(size.isFinite);
}
复制代码

可见，最终是经过父节点传递的Constraint计算获得自身的Size(100, 100)。

总结上述流程，Constraint是父节点在performLayout函数中经过layout函数层层传递下来的，在子节点调用layout后，子节点会计算其Size，而后父节点会根据子节点的Size计算自身的Size，从而肯定其大小。该流程图以下所示：

4. 小结

本文主要结合源码分析了Flutter布局的核心规则，其重点以下：

• 核心布局规则是Constraint向下，Size向上，父节点设置本节点的位置。
• performLayout通常包括如下几步：首先将Constraint经过layout函数传递给子节点，子节点会经过layout函数在其performLayout函数中计算自身的Size，而后经过子节点的Size计算自身的Size，最后经过自身Size和子节点的Size计算子节点的parentData的Offset。该Offset会在绘制子节点的时候使用。

5. 参考文档

Flutter architectural overview

6. 相关文章

Flutter框架分析（一）--架构总览
Flutter框架分析（二）-- Widget
Flutter框架分析（三）-- Element
Flutter框架分析（四）-RenderObject
Flutter框架分析（五）-Widget，Element，RenderObject树
Flutter框架分析（七）-relayoutBoundary
Flutter框架分析（八）-Platform Channel
Flutter框架分析- Parent Data
Flutter框架分析 -InheritedWidget