Flutter框架分析(六)-Constraint（flutter框架开发的app）

ccwgpt 2024-09-15 14:56 37 浏览 0 评论

1. 前言

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

2. 布局原则解析

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

一个Widget从它的父节点获取Constraint，并将其传递给子节点。
该Widget对其子节点进行布局。
最终，该节点告诉其父节点它的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布局的核心规则，其重点如下：

核心布局规则是Constraints向下，Size向上，父节点设置本节点的位置。

performLayout一般包括以下几步：首先将Constraint通过layout函数传递给子节点，子节点会通过layout函数在其performLayout函数中计算自身的Size，然后通过子节点的Size计算自身的Size，最后通过自身Size和子节点的Size计算子节点的parentData的Offset。该Offset会在绘制子节点的时候使用。