Flutter Framework层UI绘制的入口(一)-技术圈

本文记录自己学习 Flutter 绘制所见源码，并不是全面详细的解析 Blog。

Flutter 源码环境：1.22.1

Flutter 官方提供一张 Vsync 信号使 UI 线程和 GPU 线程相互协调渲染界面，如图所示：

由上图可知,UI 线程只负责 Dart 层的视图数据的处理绘制，并将处理后的尽快数据提供给 GPU。

Flutter Framework 绘制层

初始化注册以及响应

在 Flutter 中，对 Vsync 信号的注册，处理响应 Vsync 到来的过程中，底层会调用到 window.onBeginFrame()和 onDrawFrame()这两个方法，对应 Dart 层就_onBeginFrame，_onDrawFrame。

1.2 window

sky_engine/lib/ui/window.dart

class Window {  Window._() {    ...  }
  FrameCallback? get onBeginFrame => _onBeginFrame;  FrameCallback? _onBeginFrame;  set onBeginFrame(FrameCallback? callback) {    _onBeginFrame = callback;    ...  }
  VoidCallback? get onDrawFrame => _onDrawFrame;  VoidCallback? _onDrawFrame;  Zone _onDrawFrameZone = Zone.root;  set onDrawFrame(VoidCallback? callback) {    _onDrawFrame = callback;    ...  }}

onBeginFrame，onDrawFrame 实际持有者是_onBeginFrame，_onDrawFrame。那它又是怎么被初始化赋值的呢？

1.1 初始化

我们从入口方法 main()，一步步来看。

1.1.1 main()

void main() {  runApp(MyApp());}

1.1.2 runApp()

flutter/lib/src/widgets/binding.dart

void runApp(Widget app) {  WidgetsFlutterBinding.ensureInitialized()    ..scheduleAttachRootWidget(app)    ..scheduleWarmUpFrame();}

1.1.3 scheduleAttachRootWidget()

flutter/lib/src/widgets/binding.dart

  @protected  void scheduleAttachRootWidget(Widget rootWidget) {    Timer.run(() {      attachRootWidget(rootWidget);    });  }
  ...
  void attachRootWidget(Widget rootWidget) {    _readyToProduceFrames = true;    _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(      container: renderView,      debugShortDescription: '[root]',      child: rootWidget,    ).attachToRenderTree(buildOwner, renderViewElement as RenderObjectToWidgetElement<RenderBox>);  }

可见，在 attachRootWidget 的过程中，会实例化一个_renderViewElement,并把应用传过来的 rootWidget 作为根节点加入树中。

1.1.4 attachToRenderTree()

flutter/lib/src/widgets/binding.dart

  RenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T> element ]) {    if (element == null) {      owner.lockState(() {        element = createElement();        assert(element != null);        element.assignOwner(owner);      });      owner.buildScope(element, () {        element.mount(null, null);      });      // This is most likely the first time the framework is ready to produce      // a frame. Ensure that we are asked for one.      SchedulerBinding.instance.ensureVisualUpdate();    } else {      element._newWidget = this;      element.markNeedsBuild();    }    return element;  }

程序第一次启动 element 是空的，那么会创建一个新的，调用 ensureVisualUpdate()，否则标识更新。

再继续看SchedulerBinding.instance.ensureVisualUpdate()方法。