前言

上篇文章《Flutter框架分析(一)-- 總覽和Window》介紹了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。還記得在《Flutter框架分析(一)-- 總覽和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 {
@override
void initInstances() {
  super.initInstances();
  _instance = this;
  window.onBeginFrame = _handleBeginFrame;
  window.onDrawFrame = _handleDrawFrame;
  SystemChannels.lifecycle.setMessageHandler(_handleLifecycleMessage);
}

這個綁定主要是給window設置了onBeginFrameonDrawFrame的回調,回憶一下上一篇文章講渲染流水線的時候,當Vsync信號到來的時候engine會回調Flutter的來啟動渲染流程,這兩個回調就是在SchedulerBinding管理的。

第四個是PaintingBinding。繪制綁定。

mixin PaintingBinding on BindingBase, ServicesBinding {
@override
void initInstances() {
  super.initInstances();
  _instance = this;
  _imageCache = createImageCache();
}

這個綁定只是創建了個圖片緩存,就不細說了。

第五個是SemanticsBinding。輔助功能綁定。

mixin SemanticsBinding on BindingBase {
@override
void 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

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.navigationSystemChannels.system的消息處理函數。這兩個回調一個是專門處理路由的,另一個是處理一些系統事件,比如剪貼板,震動反饋,系統音效等等。

至此,WidgetsFlutterBinding.ensureInitialized()就跑完了,總體上來講是把window提供的API分別封裝到不同的Binding里。我們需要重點關注的是SchedulerBindingRendererBindingWidgetsBinding。這3個是渲染流水線的重要存在。

接下來就該看一下runApp()里的第二個調用了。

attachRootWidget(app)

這個函數的代碼如下:

  void attachRootWidget(Widget rootWidget) {
    _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
      container: renderView,
      debugShortDescription: '[root]',
      child: rootWidget
    ).attachToRenderTree(buildOwner, renderViewElement);
  }

在之前說的RendererBinding的初始化的時候,我們得到了一個RenderView的實例,render tree的根節點。RenderView是繼承自RenderObject的,而RenderObject需要有對應的WidgetElement。上述代碼中的RenderObjectToWidgetAdapter就是這個Widget。而對應的Element就是RenderObjectToWidgetElement了,既然是要關聯到render tree的根節點,那它自然也就是element tree的根節點了。

從上述分析我們可以得出結論:

  • 渲染綁定(RendererBinding)通過pipelineOwner間接持有render tree的根節點RenderView
  • 組件綁定(WidgetsBinding)持有element tree的根節點RenderObjectToWidgetElement

那麼RenderObjectToWidgetElement是怎麼和RenderView關聯起來的呢,那自然是通過一個Widget做到的了,看下RenderObjectToWidgetAdapter的代碼:

class RenderObjectToWidgetAdapter<T extends RenderObject> 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<T> createElement() => RenderObjectToWidgetElement<T>(this);

  @override
  RenderObjectWithChildMixin<T> 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的時候說的兩個回調函數onBeginFrameonDrawFrame嗎?這里其實就是在具體執行這兩個回調。最後渲染出來首幀場景送入engine顯示到熒幕。這里使用Timer.run()來異步運行兩個回調,是為了在它們被調用之前有機會處理完微任務隊列(microtask queue)。關於Dart代碼異步執行可以參考我的文章《Flutter/Dart中的異步》

我們之前說渲染流水線是由Vsync信號驅動的,但是上述過程都是在runApp()里完成的。並沒有看到什麼地方告訴engine去調度一幀。這是因為我們是在做Flutter的初始化。為了節省等待Vsync信號的時間,所以就直接把渲染流程跑完做出來第一幀圖像來了。

總結

Flutter框架的初始化就介紹完了。順帶還包括了Flutter app首幀渲染的一個大致流程。本文中所說的Flutter框架初始化過程其實主要的點都在幾個綁定(binding)的初始化。理解的時候要記住上篇文章中介紹的渲染流水線和window。Flutter框架其實就是圍繞這兩個東西在做文章。總結起來本文的要點這么幾個:

  • 3個重要綁定:SchedulerBindingRendererBindingWidgetsBinding
  • 2個「owner」:PipelineOwnerBuildOwner
  • 2顆樹的根節點:render tree根節點RenderView;element tree根節點RenderObjectToWidgetElement

有了這些基礎以後,後續的文章我們會再去分析WidgetElementRenderObject之間的關系,以及具體的Flutter渲染流水線各階段是如何工作的。