Flutter框架分析（二）-- 初始化-白红宇

Flutter框架分析分析系列文章：

前言

上篇文章介绍了Flutter框架最核心的渲染流水线和最基础的Window。这篇文章里，我们从Flutter框架的初始化来进入，来一步步揭开Flutter的面纱。写过Flutter程序的同学都知道，Flutter app的入口就是函数runApp()。

void main() {  runApp(MyApp());}复制代码

那么我们就从函数runApp()入手，看看这个函数被调用以后发生了什么。

初始化

runApp()的函数体位于widgets/binding.dart。长这样：

void runApp(Widget app) {  WidgetsFlutterBinding.ensureInitialized()    ..attachRootWidget(app)    ..scheduleWarmUpFrame();}复制代码

从调用的函数名称就可以看出来，它做了3件事，

确保WidgetsFlutterBinding被初始化。

把你的Widget贴到什么地方去。

然后调度一个“热身”帧。

OK，那我们就来挨个看一下这3件事具体都做了什么。

ensureInitialized()

首先我们先看一下WidgetsFlutterBinding是什么，从这个类的名称来看，是把Widget和Flutter绑定在一起的意思。

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {  static WidgetsBinding ensureInitialized() {    if (WidgetsBinding.instance == null)      WidgetsFlutterBinding();    return WidgetsBinding.instance;  }}复制代码

这个类继承自BindingBase并且混入（Mixin）了很多其他类，看名称都是不同功能的绑定。而静态函数ensureInitialized()所做的就是返回一个WidgetsBinding.instance单例。

混入的那些各种绑定类也都是继承自抽象类BindingBase的。

abstract class BindingBase {    BindingBase() {        ...        initInstances();        ...    }    ...    ui.Window get window => ui.window;}复制代码

关于抽象类BindingBase，你需要了解两个地方，一个是在其构造的时候会调用函数initInstances()。这个函数会由其子类，也就是上面说那些各种混入（Mixin）的绑定类各自实现，具体的初始化都是在其内部实现的。另一个就是BindingBase有一个getter，返回的是window。还记得在中提到过的窗口吗？没错，这里的window就是它。那我们是不是可以推论，这些个绑定其实就是对window的封装？来，让我们挨个看一下这几个绑定类在调用initInstances()的时候做了什么的吧。

第一个是GestureBinding。手势绑定。

mixin GestureBinding on BindingBase implements HitTestable, HitTestDispatcher, HitTestTarget {  @override  void initInstances() {    super.initInstances();    _instance = this;    window.onPointerDataPacket = _handlePointerDataPacket;  }复制代码

在调用initInstances()的时候，主要做的事情就是给window设置了一个手势处理的回调函数。所以这个绑定主要是负责管理手势事件的。

第二个是ServicesBinding。服务绑定

mixin ServicesBinding on BindingBase { @override void initInstances() {   super.initInstances();   _instance = this;   window     ..onPlatformMessage = BinaryMessages.handlePlatformMessage;   initLicenses(); }复制代码

这个绑定主要是给window设置了处理Platform Message的回调。

第三个是SchedulerBinding。调度绑定。

mixin SchedulerBinding on BindingBase, ServicesBinding {@overridevoid initInstances() {  super.initInstances();  _instance = this;  window.onBeginFrame = _handleBeginFrame;  window.onDrawFrame = _handleDrawFrame;  SystemChannels.lifecycle.setMessageHandler(_handleLifecycleMessage);}复制代码

这个绑定主要是给window设置了onBeginFrame和onDrawFrame的回调，回忆一下上一篇文章讲渲染流水线的时候，当Vsync信号到来的时候engine会回调Flutter的来启动渲染流程，这两个回调就是在SchedulerBinding管理的。

第四个是PaintingBinding。绘制绑定。

mixin PaintingBinding on BindingBase, ServicesBinding {@overridevoid initInstances() {  super.initInstances();  _instance = this;  _imageCache = createImageCache();}复制代码

这个绑定只是创建了个图片缓存，就不细说了。

第五个是SemanticsBinding。辅助功能绑定。

mixin SemanticsBinding on BindingBase {@overridevoid initInstances() {  super.initInstances();  _instance = this;  _accessibilityFeatures = window.accessibilityFeatures;}复制代码

这个绑定管理辅助功能，就不细说了。

第六个是RendererBinding。渲染绑定。这是比较重要的一个类。

mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable { @override void initInstances() {   super.initInstances();   _instance = this;   _pipelineOwner = PipelineOwner(     onNeedVisualUpdate: ensureVisualUpdate,     onSemanticsOwnerCreated: _handleSemanticsOwnerCreated,     onSemanticsOwnerDisposed: _handleSemanticsOwnerDisposed,   );   window     ..onMetricsChanged = handleMetricsChanged     ..onTextScaleFactorChanged = handleTextScaleFactorChanged     ..onPlatformBrightnessChanged = handlePlatformBrightnessChanged     ..onSemanticsEnabledChanged = _handleSemanticsEnabledChanged     ..onSemanticsAction = _handleSemanticsAction;   initRenderView();   _handleSemanticsEnabledChanged();   assert(renderView != null);   addPersistentFrameCallback(_handlePersistentFrameCallback);   _mouseTracker = _createMouseTracker(); }复制代码

这个绑定是负责管理渲染流程的，初始化的时候做的事情也比较多。首先是实例化了一个PipelineOwner类。这个类负责管理驱动我们之前说的渲染流水线。随后给window设置了一系列回调函数，处理屏幕尺寸变化，亮度变化等。接着调用initRenderView()。

void initRenderView() {   assert(renderView == null);   renderView = RenderView(configuration: createViewConfiguration(), window: window);   renderView.scheduleInitialFrame(); }复制代码

这个函数实例化了一个RenderView类。RenderView继承自RenderObject。我们都知道Flutter框架中存在这一个渲染树（render tree）。这个RenderView就是渲染树（render tree）的根节点，这一点可以通过打开"Flutter Inspector"看到，在"Render Tree"这个Tab下，最根部的红框里就是这个RenderView。

最后调用addPersistentFrameCallback添加了一个回调函数。请大家记住这个回调，渲染流水线的主要阶段都会在这个回调里启动。

第七个是WidgetsBinding，组件绑定。

mixin WidgetsBinding on BindingBase, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {  @override  void initInstances() {    super.initInstances();    _instance = this;    buildOwner.onBuildScheduled = _handleBuildScheduled;    window.onLocaleChanged = handleLocaleChanged;    window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);    SystemChannels.system.setMessageHandler(_handleSystemMessage);  }复制代码

这个绑定的初始化先给buildOwner设置了个onBuildScheduled回调，还记得渲染绑定里初始化的时候实例化了一个PipelineOwner吗？这个BuildOwner是在组件绑定里实例化的。它主要负责管理Widget的重建，记住这两个"owner"。他们将会Flutter框架里的核心类。接着给window设置了两个回调，因为和渲染关系不大，就不细说了。最后设置SystemChannels.navigation和SystemChannels.system的消息处理函数。这两个回调一个是专门处理路由的，另一个是处理一些系统事件，比如剪贴板，震动反馈，系统音效等等。

至此，WidgetsFlutterBinding.ensureInitialized()就跑完了，总体上来讲是把window提供的API分别封装到不同的Binding里。我们需要重点关注的是SchedulerBinding，RendererBinding和WidgetsBinding。这3个是渲染流水线的重要存在。

接下来就该看一下runApp()里的第二个调用了。

attachRootWidget(app)

这个函数的代码如下：

void attachRootWidget(Widget rootWidget) {    _renderViewElement = RenderObjectToWidgetAdapter
    
     (      container: renderView,      debugShortDescription: '[root]',      child: rootWidget    ).attachToRenderTree(buildOwner, renderViewElement);  }复制代码

在之前说的RendererBinding的初始化的时候，我们得到了一个RenderView的实例，render tree的根节点。RenderView是继承自RenderObject的，而RenderObject需要有对应的Widget和Element。上述代码中的RenderObjectToWidgetAdapter就是这个Widget。而对应的Element就是RenderObjectToWidgetElement了，既然是要关联到render tree的根节点，那它自然也就是element tree的根节点了。

从上述分析我们可以得出结论：

渲染绑定（RendererBinding）通过pipelineOwner间接持有render tree的根节点RenderView。

组件绑定（WidgetsBinding）持有element tree的根节点RenderObjectToWidgetElement。

那么RenderObjectToWidgetElement是怎么和RenderView关联起来的呢，那自然是通过一个Widget做到的了，看下RenderObjectToWidgetAdapter的代码：

class RenderObjectToWidgetAdapter
    
      extends RenderObjectWidget {  /// Creates a bridge from a [RenderObject] to an [Element] tree.  ///  /// Used by [WidgetsBinding] to attach the root widget to the [RenderView].  RenderObjectToWidgetAdapter({    this.child,    this.container,    this.debugShortDescription  }) : super(key: GlobalObjectKey(container));  @override  RenderObjectToWidgetElement
     
       createElement() => RenderObjectToWidgetElement
      
       (this);  @override  RenderObjectWithChildMixin
       
         createRenderObject(BuildContext context) => container;  ...  }复制代码

你看，createElement()返回的就是RenderObjectToWidgetElement，而createRenderObject返回的container就是构造这个Widget传入的RenderView了。而我们自己的MyApp作为一个子widget存在于RenderObjectToWidgetAdapter之中。

最后调用的attachToRenderTree做的事情属于我们之前说的渲染流水线的构建（Build）阶段，这时会根据我们自己的widget生成element tree和render tree。构建（Build）阶段完成以后，那自然是要进入布局（Layout）阶段和绘制（Paint）阶段了。怎么进呢？那就是runApp里的最后一个函数调用了。

scheduleWarmUpFrame()

void scheduleWarmUpFrame() {    ...    Timer.run(() {      ...      handleBeginFrame(null);      ...    });    Timer.run(() {      ...      handleDrawFrame();      ...    });  }复制代码

这个函数其实就调了两个函数，就是之前我们讲window的时候说的两个回调函数onBeginFrame和onDrawFrame吗？这里其实就是在具体执行这两个回调。最后渲染出来首帧场景送入engine显示到屏幕。这里使用Timer.run()来异步运行两个回调，是为了在它们被调用之前有机会处理完微任务队列（microtask queue）。关于Dart代码异步执行可以参考我的文章

我们之前说渲染流水线是由Vsync信号驱动的，但是上述过程都是在runApp()里完成的。并没有看到什么地方告诉engine去调度一帧。这是因为我们是在做Flutter的初始化。为了节省等待Vsync信号的时间，所以就直接把渲染流程跑完做出来第一帧图像来了。

总结

Flutter框架的初始化就介绍完了。顺带还包括了Flutter app首帧渲染的一个大致流程。本文中所说的Flutter框架初始化过程其实主要的点都在几个绑定（binding）的初始化。理解的时候要记住上篇文章中介绍的渲染流水线和window。Flutter框架其实就是围绕这两个东西在做文章。总结起来本文的要点这么几个：

3个重要绑定：SchedulerBinding，RendererBinding和WidgetsBinding。

2个“owner”：PipelineOwner和BuildOwner。

2颗树的根节点：render tree根节点RenderView；element tree根节点RenderObjectToWidgetElement。

有了这些基础以后，后续的文章我们会再去分析Widget，Element和RenderObject之间的关系，以及具体的Flutter渲染流水线各阶段是如何工作的。