您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Flutter框架分析(六)-Constraint

1. 前言

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

2. 布局原则解析

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

  1. 一个Widget从它的父节点获取Constraint,并将其传递给子节点。
  2. Widget对其子节点进行布局。
  3. 最终,该节点告诉其父节点它的Size
    Flutter FrameworkRenderObject Tree进行深度优先遍历。并将Constraint通过parent传给child的方式逐步向下传递。RenderObject为了计算自身的SizeRenderObject必须遵循其父节点传递下来的Constraint。对于某些依赖其子节点SizeRenderObject来说,在计算其Size之前还需要获取其子节点的Size。因此RenderObjectSize会逐步向上传递。
    该规则的示意图如下所示:

image.gif

接下来,我们将通过一个简单的例子来解析这个核心规则。

3. 示例

示例代码如下:

class Example3Test extends StatelessWidget {

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

可以看到,这个代码非常简单,即在屏幕的中间画一个长宽均为100的红色方块。其图如下所示。

image.gif

该示例对应的RenderObject Tree如下:

image.gif

接下来,我们将结合源码逐步讲解ConstraintSize传递的过程。

RenderViewperformLayout函数如下:

@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)),并通过子RenderObjectlayout函数,将一个固定为屏幕大小的Constraint(w=392.7, h=803.6)传递给子节点,即强制要求其子节点的Size也为屏幕的大小。

接下来,我们看子节点RenderPositionedBoxperformLayout函数。其源码如下:

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));
  }
}

可以看到,首先会通过constraintsloosen函数,将RenderView传递下来的Constraint(w=392.7, h=803.6)放宽至Constraint(0<=w<=392.7, 0<=h<=803.6),并将其通过子节点的layout函数传递给子节点。

子节点在其performLayout函数中会计算出其Size,然后RenderPositionedBox根据该Size计算出自己的Size。子节点的performLayout会在接下来进行分析。

最后,根据RenderPositionedBoxSize和子节点的Size计算出子节点相对于RenderPositionedBox的位置,并将该值赋予子节点parentDataoffset

接下来,我们分析RenderConstrainedBoxperformLayout函数。其源码如下:

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,此例中ConstraintConstraint(w=100, h=100)。

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

这里不需要设置子节点的parentData.offset,原因是子节点会填充满RenderConstrainedBox,因此其子节点的parentData.offset就是offset(0,0)。

最后,我们来看_RenderColoredBox的performLayout函数。
RenderColoredBox未重写performLayout函数,其函数调用关系如下:

image.gif

最终会调用到RenderBoxperformResize函数,其源代码如下:

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,从而确定其大小。该流程图如下所示:

image.gif

4. 小结

本文主要结合源码分析了Flutter布局的核心规则,其重点如下:

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

5. 参考文档

Flutter architectural overview

6. 相关文章

Flutter框架分析(一)–架构总览
Flutter框架分析(二)-- Widget
Flutter框架分析(三)-- Element
Flutter框架分析(四)-RenderObject
Flutter框架分析(五)-Widget,Element,RenderObject树
Flutter框架分析- Parent Data
Flutter框架分析 -InheritedWidget


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进