Flutter框架分析（六）-Constraint

2021-06-29 20:32:56 阅读：233 来源： 互联网

标签：框架 Constraint Flutter Size 节点 constraints size

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布局的核心规则，其重点如下：

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

5. 参考文档

Flutter architectural overview

标签：框架,Constraint,Flutter,Size,节点,constraints,size
来源： https://blog.csdn.net/zuoluohust/article/details/118343149

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。