Flutter 探索系列：盒约束布局（三）

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

介绍

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

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

原理分析

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

1，布局流程是怎样的

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

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

Flutter 的布局流程如下图所示

image

这是一个组件渲染树，每个节点对应一个组件，每个节点都是一个 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

[RenderObject和RenderBox]https://book.flutterchina.club/chapter14/render_object.html