Flutter 学习之旅(四十) Flutter RenderObjcet(二)layout 布局计算过程

整个RenderObject 的测量过程其实并不是非常复杂,这里我们以 RenderPadding 为例来讲解一下,
在flutter 中整个测量过程是伴随着layout的过程同时进行的,其实可以认为是你要是不知道控件大小,如何进行接下来的布局,所以他们是相辅相成的,在上一篇的文章中我们介绍过layout 的过程,整个计算的过程都是在子widget 的performLayout()的方法中,

这里我们说一下RenderPadding

  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;///获取该widget 的约束大小
    _resolve();//根据方向重置 padding 
    if (child == null) {//没有child
      size = constraints.constrain(Size(///如果没有child size 的大小就是 计算后的padding
        _resolvedPadding.left + _resolvedPadding.right,
        _resolvedPadding.top + _resolvedPadding.bottom,
      ));
      return;
    }
  ///deflate方法计算除去padding后剩余的约束大小,将这个大小作为子widget的约束,
    final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding);
////计算子widget  的size , 如果不是sizebyparent 则需要根据子widget 的performLayout继续去计算
 ////这样循环下去,知道到最后的widget ,计算出size ,向上返回
    child.layout(innerConstraints, parentUsesSize: true);
    final BoxParentData childParentData = child.parentData as BoxParentData;
    childParentData.offset = Offset(_resolvedPadding.left, _resolvedPadding.top);
    size = constraints.constrain(Size(
      _resolvedPadding.left + child.size.width + _resolvedPadding.right,
      _resolvedPadding.top + child.size.height + _resolvedPadding.bottom,
    ));
  }

  
///如果有child 则根据自身的约束 和padding 计算除去padding 的约束大小, 
  BoxConstraints deflate(EdgeInsets edges) {
    final double horizontal = edges.horizontal;
    final double vertical = edges.vertical;
    final double deflatedMinWidth = math.max(0.0, minWidth - horizontal);
    final double deflatedMinHeight = math.max(0.0, minHeight - vertical);
    return BoxConstraints(
      minWidth: deflatedMinWidth,
      maxWidth: math.max(deflatedMinWidth, maxWidth - horizontal),
      minHeight: deflatedMinHeight,
      maxHeight: math.max(deflatedMinHeight, maxHeight - vertical),
    );
  }

整个过程可以理解为,在一次遍历中，父节点调用每个子节点的布局方法，将约束向下传递，子节点根据约束，计算自己的布局，并将结果传回给父节点

如果这样弄得话就会存在一些问题,如果一个widget 的大小或者内容改变了,需要重新创建,而如果他的大小又影响了父控件的大小,这样就导致了在layout 的过程中先要调用markNeedsLayout 向上查找parent ,直到找到relayoutBoundary后,再通过parent 的performLayout ()方法重新计算并布局整个widget,这个过程可以说执行了非常多的layout 和计算的过程,就导致了改控件改变后需要付出的代价的太大了,那么如何将这个过程变得简单呢,如果一个控件大小改变了,他的内部变化是不可避免的,我们可以通过改变relayoutBoundary 即布局边界来阻止他向上查找parent,让变化只影响当前widget和他的子widget就可以了,如果子widget也没有改变,在element updatechild 的方法中是可以重用widget 的,则在整个过程中其实我们需要改变的,只有当前这个widget,这样就可以最大限度的提高flutter性能了,

那么如何去改变relayoutBoundary这个布局边界呢

整个layout和计算的过程中存在一个relayoutBoundary,如果这该widget 为布局边界,则不会影响
在RenderObject 的 layout 的方法中,relayoutBoundary 是由很多个参数同时决定的

 if (!parentUsesSize || sizedByParent || constraints.isTight || parent is! RenderObject) {
      relayoutBoundary = this;
    }

parentUsesSize = false：父节点的布局不依赖当前节点的大小
sizedByParent = true：当前节点大小由父节点决定
constraints.isTight：大小为确定的值，即宽高的最大值等于最小值
parent is not RenderObject：如果父节点不是RenderObject，子节点layout变化不需要通知父节点更新

通过改变这些数据来就可以控制布局边界来了,但是这样使用起来就会要求我们去重写控件,能力有限就不多写了,因为接下来的东西我还没有接触过,大家可以看一下//www.greatytc.com/p/31e3b9008d6a 闲鱼的技术博客,写的非常好,在我的理解如果顶部widget 变化的话,所有子widget 都会重新layout和计算一次,但是闲鱼那边则是O(N2),不知道哪里没有理解,希望大家能留言共同探讨一下,思考问题解决问题才是自己继续学习下的动力

我学习flutter的整个过程都记录在里面了
//www.greatytc.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter