Flutter视图的Layout与Paint

2018-12-05 本文已影响27人 e618211d6873

本文目的

分析flutter的Layout与Paint
relayout boundary和repaint boundary是什么
开发者如何使用relayout boundary和repaint boundary

目录结构

Flutter的绘图原理和UI的基本流程
Widget在flutter绘图时的作用
分析Layout
分析Paint
总结

Flutter的绘图原理和UI的基本流程

Flutter的绘图原理

flutter-vsync.png

从图中可以看到，当GPU发出Vsunc信号时，会执行Dart代码绘制新UI，Dart-code会被执行为Layer Tree，然后经过Compositor合成后交由Skia引擎渲染处理为GPU数据，最后通过GL/Vulkan发给GPU。
而我们要分析的地方就在Dart->Layer Tree这里。
UI的基本流程

render-pipeline.png

比如用户一个输入操作，可以理解发出为Vsunc信号，这时，fliutter会先做Animation相关工作，然后Build当前UI，之后视图开始布局和绘制。生成视图数据，但是只会生成Layer Tree，并不能直接使用，还是需要Composite合成为一个Layer进行Rasterize光栅化处理。层级合并的原因是因为一般flutter的层级很多，直接把每一层传给GPU传递，效率很低，所以会先做Composite，提高效率。
光栅化之后才会给Flutter-Engine处理，这里只是Framework层面的工作，所以看不到Engine，而我们分析的也只是Framework中的一小部分。

flutter-pipeline.png
通过上面的讲解，我们大概已经了解了flutter的绘图的基本流程，但是我们并不清楚layout和paint做了什么，而Widget是如何变成Layou Tree的。但是这里内容太多，一句话说不清，所以我们还是先看下我们平时写的大量Widget在flutter绘图时的到底是啥用吧。

Widget在Flutter绘图时的作用

在这之前，我们要先了解几个概念

Widget
Element
RenderObject

Widget

这里的Widget就是我们平时写的Widget，它是 Flutter中控件实现的基本单位。一个Widget里面一般存储了视图的配置信息，包括布局、属性等等。所以它只是一份直接使用的数据结构。在构建为结构树，甚至重新创建和销毁结构树时都不存在明显的性能问题。

Element

Element是Widget的抽象，它承载了视图构建的上下文数据。flutter系统通过遍历 Element树来构建 RenderObject数据，所以Element是真正被使用的集合，Widget只是数据结构。比如视图更新时，只会标记dirty Element，而不会标记dirty Widget。

RenderObject

我们要分析的Layout、Paint均发生在RenderObject中，并且LayerTree也是由RenderObject生成，可见其重要程度。所以 Flutter中大部分的绘图性能优化发生在这里。RenderObject树构建的数据会被加入到 Engine所需的 LayerTree中。

Widget-Element-RenderObject .jpg

而以上这三个概念也对应着三种树结构：模型树、呈现树、渲染树。
在解释他们的概念和关系以后，我们已经认识到RenderObject的重要性，因为以下Layout、Paint包括relayout boundary和repaint boundary都是在这里发生的。

一般一个Widget被更新，那么持有该 Widget的节点的Element会被标记为dirtyElement，在下一次更新界面时，Element树的这一部分子树便会被触发performRebuild，在Element树更新完成后，便能获得RenderObject树，接下来会进入Layout和Paint的流程。

Layout

Layout的目的是要计算出每个节点所占空间的真实大小。

layout-data-flow.png

在构建视图树的时候，节点的Constraints是自上而下的，但是计算layout是深度优先遍历，这是因为节点通过Constraints并不一定能够明确自己的size，有时它会依赖子节点的size，所以获取size大小是自下而上。
每个节点会接受到父对象的Constraints，子节点根据其来决定自己的大小，父对象会根据自己的逻辑决定子对象的位置来完成布局。
所以flutter的layout实际上就是这么简单的操作。那么简单肯定就有一些问题，比如某个节点的size变了，整个视图树就得重新计算？
肯定不是这样的，否则flutter就不存在图形的高性能了。flutter是通过Relayout boundary来处理这样的问题的。
Relayout boundary
它的目的是提高flutter的绘图性能，它的作用是设置测量边界，边界内的Widget做任何改变都不会导致边界外重新计算并绘制。
Relayout boundary.jpeg

当然它是有条件的，当满足以下三个条件的任意一个就会触发Relayout boundary
- constraints.isTight
- parentUsesSize == false
- sizedByParent == true

constraints.isTight

什么是isTight呢？用BoxConstraints为例

BoxConstraints.jpeg

它有四个属性，分别是minWidth，maxWidth，minHeight，maxHeight

tight
如果最小约束(minWidth，minHeight)和最大约束(maxWidth，maxHeight)分别都是一样的
loose
如果最小约束都是0.0（不管最大约束），如果最小约束和最大约束都是0.0，就同时是tightly和loose
bounded
如果最大约束都不是infinite
unbounded
如果最大约束都是infinite
expanding
如果最小约束和最大约束都是infinite

所以isTight就是强约束，Widget的size已经被确定，里面的子Widget做任何变化，size都不会变。那么从该Widget开始里面的任意子Wisget做任意变化，都不会对外有影响，就会被添加Relayout boundary（说添加不科学，因为实际上这种情况，它会把size指向自己，这样就不会再向上递归而引起父Widget的Layout了）

parentUsesSize == false

实际上parentUsesSize与sizedByParent看起来很像，但含义有很大区别
parentUsesSize表示父Widget是否要依赖子Widget的size，如果是false，子Widget要重新布局的时候并不需要通知parent，布局的边界就是自身了。

sizedByParent == true

sizedByParent表示当前的Widget虽然不是isTight，但是通过其他约束属性，也可以明确的知道size，比如Expanded，并不一定需要明确的size。

通过查看RenderObject-1579行，当然可以看到Layout的实现

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

通过Layout可以看到，flutter为了提高效率所做的努力，那作为开发者可以直接使用relayout boundary吗？
一般情况是不可以的，但是如果当你决定要自定义一个Row的时候，肯定是要使用它的。但是你可以间接的利用上面的三个条件来使你的Widget树某些地方拥有relayout boundary。

Paint

Paint的一个重要工作就是确定哪些Element放在同一Layer

paint-into-layers.png
布局size计算是自下而上的，但是paint是自上而下的。在layout之后，所有的Widget的大小、位置都已经确定，这时不需要再做遍历。

paint-target-layer-flow.png

Paint也是按照深度优先的顺序，而且总是先绘制自身，再是子节点，比如节点 2是一个背景色绿色的视图，在绘制完自身后，绘制子节点3和4。当绘制完以后，Layer是按照深度优先的倒叙进行返回，类似Size的计算，而每个Layer就是一层，最后的结果是一个Layer Tree。
也许你已注意到在2节点由于一些其他原因导致它的部分UI5与6处于了同一层，这样的结果会导致当2需要重绘的时候，与其不想相关的6实际上也会被重绘，而存在性能损耗。Flutter的工程师当然不会作出这么愚蠢的设计。所以为了提高性能，与relayout boundary相应的存在repaint boundary。
repaint boundary
如果发生上面情况，repaint boundary会强制的使2切换到新Layer

repaint boundary.jpeg

这样强制使图层分开，以达到毫不相关的控件的Paint的时候，不会被影响导致重绘。
Repaint boundary一般不需要开发者设置。但开发者可以手动设置，Flutter提供RepaintBoundary组件，你可以在你认为需要的地方，设置Repaint boundary。