阅读 9

Flutter 探索系列:盒约束布局(三)

上一篇文章中,我们分析了 Flutter 布局和渲染的大致实现,这篇文章继续介绍 Flutter 的布局过程。

介绍

App 在渲染视图时,需要在坐标系中指定区域进行绘制。Flutter 的坐标系是二维空间,这和iOS和安卓的原生坐标系是一样的,屏幕的左上角是坐标原点(0, 0),向屏幕右下方延伸,对应宽高两个轴。

因此我们需要获取视图的位置和大小,才能在坐标系中布局和绘制,Flutter 布局的过程即是计算视图位置和大小的过程。

原理分析

我们从几个问题开始,对 Flutter 布局实现进行分析。

1,布局流程是怎样的

我们知道,当一个组件的位置和大小都确定了,即可在页面中布局。布局流程,便是确定页面中各组件的大小和位置,如果某个组件含有子组件,那么先确定子组件的大小,再确定子组件在其父组件中的位置,以此类推完成整个 UI 的布局。

Flutter 使用盒约束布局,组件按照指定限制条件来决定自身如何占用布局空间,这有点类似前端的 Flex 弹性布局,row、column、flex-start、flex\end、margin、padding等在 Flutter 中都有对应的布局属性。盒约束布局首先计算这些限制条件,得出子组件在父组件中的位置和大小,再对组件进行布局和绘制。

Flutter 的布局流程如下图所示

这是一个组件渲染树,每个节点对应一个组件,每个节点都是一个 RenderObject 对象。从根节点开始,父节点向子节点传递 Constraints 约束,Constraints 对象可以限制子节点的最大和最小宽高,子节点遵守这个约束。子节点确定了自身的宽高之后,传给父节点,父节点再根据子节点的大小计算自身的宽高,在这个步骤中父节点会计算子节点相对于父节点的位置偏移量,即子节点的位置。以此类推完成整个页面的布局。

2,如何计算组件宽高

从根节点开始,向子节点传递 Constraints 约束,Constraints 有四个属性,最小宽度minWidth,最大宽度maxWidth,最小高度minHeight,最大高度maxHeight,他们决定了子节点的大小。如果子节点有额外的约束条件,则进行比对添加,然后再传给下一级。

RenderBox 是真正布局的类,它继承自 RenderObject,它有两个方法 performResize() 和 performLayout() 实现组件自身的布局逻辑。performLayout 先执行子组件的布局,子组件布局完成后得到子组件的大小,再执行自身的布局,同时还要遵守上一级传过来的大小限制,比较得到一个合适的大小。

我们以 Center 为例,说明一下这个过程。Center 组件继承自 Align,它对应的 RenderObject 是 RenderPositionedBox,而 RenderPositionedBox 是 RenderBox 的子类,所以 Center 组件的布局方法是在 RenderPositionedBox。我们看一下 RenderPositionedBox 的 performLayout 方法

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

    if (child != null) {
      child.layout(constraints.loosen(), parentUsesSize: true);
      size = constraints.constrain(Size(shrinkWrapWidth ? child.size.width * (_widthFactor ?? 1.0) : double.infinity,
                                            shrinkWrapHeight ? child.size.height * (_heightFactor ?? 1.0) : double.infinity));
      alignChild();
    } else {
      size = constraints.constrain(Size(shrinkWrapWidth ? 0.0 : double.infinity,
                                            shrinkWrapHeight ? 0.0 : double.infinity));
    }

复制代码

如果子组件为空,Center 的宽高也为0。如果子组件存在,先布局子组件,并把约束传进去,这里的 constraints.loosen() 表示最小宽度和最小高度都为0,最大宽度和最大高度都为最大值。

如果需要缩放,则根据_widthFactor是否为null来进行缩放,shrinkWrapWidth 和 shrinkWrapHeight 是缩放后的宽高。

alignChild 方法计算子组件的位置,入参就是父组件的大小减去子节点的大小,也就是父组件剩余的空间,然后分别对剩余长宽除以2得到中值,即是子组件的位置。这里的x 和 y 是表示垂直居中,所以 x 和 y 都是0

    void alignChild() {
    final BoxParentData childParentData = child.parentData;
    childParentData.offset = _resolvedAlignment.alongOffset(size - child.size);
  }

    Offset alongOffset(Offset other) {
    final double centerX = other.dx / 2.0;
    final double centerY = other.dy / 2.0;
    return Offset(centerX + x * centerX, centerY + y * centerY);
  }
复制代码

3,如何对布局进行性能优化

布局更新中,父子节点会相互作用,子节点更新时,会通知父节点更新。Flutter 采取了许多措施,尽可能减少需要重新布局的节点,缩小布局范围。

Flutter 有个渲染边界(relayoutBoundary)的概念。处于渲染边界上的组件大小是固定的,不会因子组件的变化而变化,边界内的组件更新,更不会影响到边界外面的组件。满足以下任一条件,则该组件是渲染边界(relayoutBoundary)

parentUsesSize,父节点传子节点 Constraints 约束时,同时将这个属性传传递给子组件。它为true时表示父节点的布局依赖子节点,子节点更新时,父节点也要相应更新。为false,表示父组件不依赖子基点。

sizedByParent,这个是RenderObject的属性,表示这个组件完全由父组件控制,不受子组件的影响。

constraints.isTight,表示组件是严格约束,不受子组件的影响。

parent is! RenderObject,父组件不是RenderObject,一般是根组件。

同时满足以下三个条件,则说明该组件不需要重新布局,进入下一步。

_needsLayout属性为false:这说明该组件没有被自己或孩子标记为脏。 constraints == _constraints :父级的限制没有发生变化。 relayoutBoundary没有发生变化:说明该组件所属的渲染边界没有发生变化。

代码如下

void layout(Constraints constraints, { bool parentUsesSize = false }) {
    RenderObject relayoutBoundary;
    if (!parentUsesSize || sizedByParent || constraints.isTight || parent is! RenderObject) {
      relayoutBoundary = this;
    } else {
      final RenderObject parent = this.parent;
      relayoutBoundary = parent._relayoutBoundary;
    }

    if (!_needsLayout && constraints == _constraints && relayoutBoundary == _relayoutBoundary) {
      return;
    }
    _constraints = constraints;
    _relayoutBoundary = relayoutBoundary;

    if (sizedByParent) {
      try {
        performResize();
      } catch (e, stack) {
        ...
      }
    }
    try {
      performLayout();
     
    } catch (e, stack) {
      ...
    }
    _needsLayout = false;
    markNeedsPaint();
  }
复制代码

参考资料:[Flutter框架分析(六)-- 布局][https://juejin.im/post/5cda66b5e51d453ce55feab8#heading-0](juejin.im/post/5cda66…)

[RenderObject和RenderBox][https://book.flutterchina.club/chapter14/render_object.html](book.flutterchina.club/chapter14/r…)