跟我学flutter：细细品Widget（四）Widget 渲染过程 与 RenderObjectWidget

前言

StatelessWidget 和 StatefulWidget 只是用来组装控件的容器，并不负责组件最后的布局和绘制。在 Flutter 中，布局和绘制工作实际上是在 Widget 的另一个子类 RenderObjectWidget 内完成的。
RenderObjectWidget为RenderObjectElement提供配置信息。
RenderObjectElement包装了RenderObject，RenderObject为应用程序提供真正的渲染。

源码

abstract class RenderObjectWidget extends Widget {
 
  const RenderObjectWidget({ Key? key }) : super(key: key);

  @override
  @factory
  RenderObjectElement createElement();

  @protected
  @factory
  RenderObject createRenderObject(BuildContext context);

  @protected
  void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }

  @protected
  void didUnmountRenderObject(covariant RenderObject renderObject) { }
}

• createElement 需要返回一个继承RenderObjectElement的类
• createRenderObject 创建 Render Widget 对应的 Render Object，同样子类需要重写该方法。该方法在对应的 Element 被挂载到树上时调用(Element.mount)，即在 Element 挂载过程中同步构建了「Render Tree」
• updateRenderObject 在 Widget 更新后，修改对应的 Render Object。该方法在首次 build 以及需要更新 Widget 时都会调用；
• didUnmountRenderObject 「Render Object」从「Render Tree」上移除时调用该方法。

RenderObjectElement 源码

abstract class RenderObjectElement extends Element {
  RenderObject _renderObject;
 
  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _renderObject = widget.createRenderObject(this);
    attachRenderObject(newSlot);
    _dirty = false;
  }
   
  @override
  void update(covariant RenderObjectWidget newWidget) {
    super.update(newWidget);
    widget.updateRenderObject(this, renderObject);
    _dirty = false;
  }
  ...
}

• mount： RenderObject 对象的创建，以及与渲染树的插入工作，插入到渲染树后的 Element 就可以显示到屏幕中了。
• update： 如果 Widget 的配置数据发生了改变，那么持有该 Widget 的 Element 节点也会被标记为 dirty。在下一个周期的绘制时，Flutter 就会触发 Element 树的更新，并使用最新的 Widget 数据更新自身以及关联的 RenderObject 对象，接下来便会进入 Layout 和 Paint 的流程。而真正的绘制和布局过程，则完全交由 RenderObject 完成。

RenderObject 主要处理一些固定的操作，如：布局、绘制和 Hit testing。 与ComponentElement一样RenderObjectElement也是抽象类，不同的是ComponentElement不会直接创建RenderObject,而是间接通过创建其他Element创建RenderObject。

RenderObjectElement主要有三个系统的子类，分别处理renderObject作为child时的不同情况。

1. LeafRenderObjectElement：叶子渲染对象对应的元素，处理没有children的renderObject。
2. SingleChildRenderObjectElement：处理只有单个child的renderObject。
3. MultiChildRenderObjectElement： 处理有多个children的渲染对象

有时RenderObject的child模型更复杂一些，比如多维数组的形式，则可能需要基于RenderObjectElement实现一个新的子类。

RenderObjectElement 充当widget与renderObject之间的中介者。需要进行方法覆盖，以便它们返回元素期望的特定类型，例如：

class FooElement extends RenderObjectElement {                                       
                                                                                    
 @override                                                                          
 Foo get widget => super.widget; 
                                                   
@override                                                                          
RenderFoo get renderObject => super.renderObject;                                  
                                                                          
}               

widget返回Foo，renderObject 返回RenderFoo

系统常用组件与RenderObjectElement：

常用组件	Widget（父级）	Element
Flex/Wrap/Flow/Stack	MultiChildRenderObjectWidget	MultiChildRenderObjectElement
RawImage(Imaget)/ErrorWidget	LeafRenderObjectWidget	LeafRenderObjectElement
Offstage/SizedBox/Align/Padding	SingleChildRenderObjectWidget	SingleChildRenderObjectElement

RenderObject源码

abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget {
  ...
  void layout(Constraints constraints, { bool parentUsesSize = false }) {...}
  
  void paint(PaintingContext context, Offset offset) { }
}

布局和绘制完成后，接下来的事情就交给 Skia 了。在 VSync 信号同步时直接从渲染树合成 Bitmap，然后提交给 GPU。

文章参考：https://www.jianshu.com/p/c3de443a70c7