Flutter筆記——runApp發生了什麼(原始碼學習)

悟篤篤發表於2020-01-18

終於放假啦，不用一直寫業務程式碼了，也終於有點時間可以整理整理筆記啦。
我在這裡先給大家拜個早年，恭祝大家新春快樂，吉祥安康啦！

Flutter系列學習筆記

main

FlutterFramework在Flutter層的專案入口是main函式，預設生成的函式如下

void main() {
  runApp(MyApp());
}
複製程式碼

1 runApp

runApp是一個頂級函式，接受一個Widget作為rootWidget，這中間發生了什麼嘞？

下文以圖片、原始碼和文字解析的方式輔助學習。由於內容較長，需要分為幾個部分學習，並且序列圖、記錄點和實際執行順序有出入，下文排序主要是為了能夠由淺入深的鋪開runApp過程中的知識點，幫助更好的理解。

2.1 過程一

main函式，呼叫runApp(Widget)函式

///同main函式，runApp函式也是一個頂級函式
void main() {
  runApp(MyApp());
}
複製程式碼

初始化WidgetsFlutterBinding.instance

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}
複製程式碼

ensureInitialized函式會建立一個WidgetsFlutterBinding的單例WidgetsBinding.instance

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {

  ///確認WidgetsBinding.instance是否建立成功，flutter framework工作是是否完成
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}
複製程式碼

WidgetsFlutterBinding通過mixIn語法繼承了7個BindingBase子類，完成整個FlutterFramework層次的系統功能初始化。mixIn語法可參考我的這篇文章HelloDart-MixIn，土話記錄多繼承機制。

abstract class BindingBase {
  
  ///會按照WidgetsFlutterBinding整合順序，以此呼叫每個WidgetsFlutterBinding子類的 
  ///initInstances和initServiceExtensions初始化函式。
  BindingBase() {
    developer.Timeline.startSync('Framework initialization');

    assert(!_debugInitialized);
    initInstances();
    assert(_debugInitialized);

    assert(!_debugServiceExtensionsRegistered);
    initServiceExtensions();
    assert(_debugServiceExtensionsRegistered);

    developer.postEvent('Flutter.FrameworkInitialization', <String, String>{});

    developer.Timeline.finishSync();
  }
}
複製程式碼

initInstances和initServiceExtensions該部分比較複雜，這裡先不學習了。簡單介紹一下BindingBase系列子類的作用，下列內容我也是看註釋的，如有錯誤煩請指出
- WidgetsFlutterBinding：將FlutterFramework繫結到FlutterEngine上面
- GestureBinding：繫結手勢系統。
- ServicesBinding：主要作用與defaultBinaryMessenger有關，用於和native通訊相關。
- SchedulerBinding：改類也繼承了ServicesBinding，主要用於排程幀渲染相關事件。
- PaintingBinding：和painting庫繫結
- SemanticsBinding：將語義層和FlutterEngine繫結起來。
- RendererBinding：將渲染樹與FlutterEngine繫結起來。
- WidgetsBinding：將Widget層與FlutterEngine繫結起來。 再次重申一下，上述內容只是看註釋得來的，如果錯漏，感謝指出

初始化完WidgetsFlutterBinding.instance及一堆系統Binding之後，便開始下一步操作了。

void runApp(Widget app) {
    WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}
複製程式碼

這裡使用級聯語法分別呼叫了scheduleAttachRootWidget(Widget)和scheduleWarmUpFrame函式，具體過程見下文

2.2 過程二

scheduleAttachRootWidget(app)：通過級聯的方式，生成了WidgetsFlutterBinding.instance靜態例項並初始化一干系統功能之後，呼叫WidgetsFlutterBinding.scheduleAttachRootWidget(Widget root)函式。
```
void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}
複製程式碼
```
attachRootWidget(Widget)：這裡非同步呼叫WidgetsBinding.attachRootWidget(Widget rootWidget)函式，只為了儘快顯示Flutter專案的UI畫面。
```
  void scheduleAttachRootWidget(Widget rootWidget) {
    Timer.run(() {
      attachRootWidget(rootWidget);
    });
  }
複製程式碼
```

scheduleWarmUpFrame()：在上面第二點中，非同步呼叫attachRootWidget函式，只為了儘快呼叫該函式，去顯示一個幀畫面。這個函式的詳細流程按下不表，等以後再學習。

  /// Schedule a frame to run as soon as possible, rather than waiting for
  /// the engine to request a frame in response to a system "Vsync" signal.
  void scheduleWarmUpFrame() {
    ...
  }
複製程式碼

RenderObjectToWidgetAdapter：接著第2點，attachRootWidget函式作用就是將根Widget、根Element與根RenderObject三個跟物件繫結起來，並將唯一的BuildOwner物件引用作為根物件的持有物件，通過繼承關係層層傳遞。看程式碼

///虛擬碼
class WidgetsBinding ...{
  void attachRootWidget(Widget rootWidget) {
    //建立一個RenderObjectToWidgetAdapter物件，泛型T是RenderBox型別，
    _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
      container: renderView,
      debugShortDescription: '[root]',//renderView[註釋1]是連線到物理裝置輸出層的渲染樹物件
      child: rootWidget,  //根Widget樹
    ).attachToRenderTree(buildOwner, renderViewElement);
  }    
}
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));

  /// The widget below this widget in the tree.
  final Widget child;

  /// The [RenderObject] that is the parent of the [Element] created by this widget.
  final RenderObjectWithChildMixin<T> container;

  @override
  RenderObjectToWidgetElement<T> createElement() => RenderObjectToWidgetElement<T>(this);

  @override
  RenderObjectWithChildMixin<T> createRenderObject(BuildContext context) => container;

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

  ///
  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;
  }
}
複製程式碼

attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T> element ])：**這裡面關於element的建立先忽略，在步驟3中學習。**該部分原始碼在第四點中，我們可以看到RenderObjectToWidgetAdapter會建立一個RenderObjectToWidgetElement物件，作為WidgetsBinding中的_renderViewElement物件。該_renderViewElement物件也就是整個Element樹中的跟物件，其持有根Widget、根RenderView與BuildOwner物件。

2.3 過程三

過程三主要分析RenderObjectToWidgetAdapter.attachToRenderTree(BuildOwner owner, [ RenderObjectToWidgetElement<T> element ])函式，期間還有一些BaseBinding內容摻雜進來，比較複雜。

BuildOnwer.lockState(fn):

  ///該函式中的_debugStateLocked 布林值，每次呼叫該函式_debugStateLockLevel都會+1，
  ///callback執行完之後減1，如果在_debugStateLocked等於true期間呼叫setState就會丟擲異常。
  void lockState(void callback()) {
    assert(callback != null);
    assert(_debugStateLockLevel >= 0);
    assert(() {
      _debugStateLockLevel += 1;
      return true;
    }());
    try {
      callback();
    } finally {
      assert(() {
        _debugStateLockLevel -= 1;
        return true;
      }());
    }
    assert(_debugStateLockLevel >= 0);
  }
複製程式碼

RenderObjectToWidgetAdapter.createElement()：會建立一個RenderObjectToWidgetElement物件。

這裡先不去細看其眾多父類中的屬性和操作
element.assignOwner(owner)：將owner:BuildOnwer賦值給element，該owner:BuildOnwer是整個Element樹的統一管理者。

element.mount(null, null)：上圖忽略了BuildOwner.buildScope(Element context, [ VoidCallback callback ])函式了，該函式作用在於將一個Element新增進去構建域中，並呼叫VoidCallback函式作為回撥。
這裡要著重看下element物件一眾父類中的mount函式了

  owner.buildScope(element, () {
    element.mount(null, null);
  });
class RenderObjectToWidgetElement ...{
  @override
  void mount(Element parent, dynamic newSlot) {
    assert(parent == null);
    super.mount(parent, newSlot);
    //這裡的child暫時為null，忽略rebuild函式
    _rebuild();
  }
}
abstract class RootRenderObjectElement extends RenderObjectElement {

  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
  }
}
///RenderObjectElement類中，最重要的屬性，_renderObject
///是該根Element的RenderObject物件，該RenderObject類儲存
///了Element的位置資訊，Skia是一個2D渲染框架，基於笛卡爾座標軸
///RenderObject也實現了基本的渲染功能。
abstract class RenderObjectElement extends Element {
  /// The underlying [RenderObject] for this element.
  @override
  RenderObject get renderObject => _renderObject;
  RenderObject _renderObject;
  @override
  void mount(Element parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    //這個回到步驟二中的RenderObjectToWidgetAdapter類，RendererBinding類初始化之後有個PipelineOwner
    //物件，PipelineOwner物件中有個rootNode物件，就是該_renderObject了
    _renderObject = widget.createRenderObject(this);
    //這裡newSlot等於null，忽略
    attachRenderObject(newSlot);
    //將dirty置為false，
    _dirty = false;
  }
}
class Element ...{
  @mustCallSuper
  void mount(Element parent, dynamic newSlot) {
    //一頓賦值
    _parent = parent;
    _slot = newSlot;
    _depth = _parent != null ? _parent.depth + 1 : 1;
    _active = true;
    if (parent != null) // Only assign ownership if the parent is non-null
      _owner = parent.owner;
    if (widget.key is GlobalKey) {
      final GlobalKey key = widget.key;
      key._register(this);
    }
    _updateInheritance();
    assert(() {
      _debugLifecycleState = _ElementLifecycle.active;
      return true;
    }());
  }    
}
複製程式碼

mount(Element parent, dynamic newSlot)掛載函式在於將Element掛載到Element樹上去，如果有parent屬性就賦值，掛載之後Element的狀態變為active。

SchedulerBinding.instance.ensureVisualUpdate()：

  void ensureVisualUpdate() {
    switch (schedulerPhase) {
      case SchedulerPhase.idle:
      case SchedulerPhase.postFrameCallbacks:
        scheduleFrame();
        return;
      case SchedulerPhase.transientCallbacks:
      case SchedulerPhase.midFrameMicrotasks:
      case SchedulerPhase.persistentCallbacks:
        return;
    }
  }
複製程式碼

SchedulerBinding.scheduleFrame()：接著便是呼叫window.scheduleFrame()函式了，這是一個native函式，純FlutterFramework部分線索就斷了。

  void scheduleFrame() {
    if (_hasScheduledFrame || !_framesEnabled)
      return;
    assert(() {
      if (debugPrintScheduleFrameStacks)
        debugPrintStack(label: 'scheduleFrame() called. Current phase is $schedulerPhase.');
      return true;
    }());
    ensureFrameCallbacksRegistered();
    window.scheduleFrame();
    _hasScheduledFrame = true;
  }
複製程式碼

3 小結

這裡做個runApp的簡單過程圖，隱藏了許多細節

FlutterFramework的Dart部分，程式入口是main函式。
呼叫runApp(Widget)函式傳入一個Widget作為根Widget。
Widget只是一個配置類，不是實際的UI元素。
runApp通過WidgetsFlutterBindingmixIn繼承一眾父類進行初始化。
其中，RendererBinding父類中的renderView物件，是實際的渲染物件。
通過RenderObjectToWidgetAdapter類，生成一個RenderObjectToWidgetElement<RenderBox>型別的Element作為根Element，並讓Widget、renderView和BuildOwner和根Element產生關係。
掛載根Element，呼叫SchedulerBinding.instance.ensureVisualUpdate()函式，等待下一幀渲染。
scheduleAttachRootWidget是一個耗時操作，非同步執行。runApp會優先呼叫scheduleWarmUpFrame()渲染預熱幀。

上述文章是筆者通過對Flutter1.12版本原始碼進行學習的總結，如有錯漏，還煩請指出糾正，十分感謝。 另外本文只是runApp的原始碼進行了跟蹤學習，Flutter到底是如何渲染到Native裝置、還有BaseBinding系列子類作用等，等之後篇學習筆記哈。

Flutter筆記——幀繪製系列之一(原始碼學習)
2020-01-23
Flutter筆記原始碼
Vue原始碼探祕（三）（new Vue發生了什麼？）
2020-03-19
Vue原始碼
vue原始碼解析之npm run build發生了什麼？
2018-09-09
Vue原始碼NPMUI
Retrofit原始碼學習筆記
2019-05-14
原始碼筆記
Flutter 學習筆記
2021-06-01
Flutter筆記
「試著讀讀 Vue 原始碼」new Vue()發生了什麼 ❓
2019-06-08
Vue原始碼
vue原始碼學習筆記1
2019-03-07
Vue原始碼筆記
jQuery原始碼學習筆記一
2018-10-30
jQuery原始碼筆記
學習筆記 sync/RWMutex原始碼
2020-12-28
筆記Mutex原始碼
Flutter:Dart 學習筆記
2020-03-18
FlutterDart筆記
Redux 學習筆記 – 原始碼閱讀
2019-01-15
Redux筆記原始碼
Redux 學習筆記 - 原始碼閱讀
2017-07-24
Redux筆記原始碼
Flutter入門與實戰（四十四）：從原始碼分析setState 的時候到底發生了什麼？
2021-08-07
Flutter原始碼
Flutter-runApp()方法
2021-07-26
FlutterAPP
Flutter 的 runApp 與三棵樹誕生流程原始碼分析
2021-08-05
FlutterAPP原始碼
Flutter 學習筆記① 第一個 Flutter App
2020-05-28
Flutter筆記APP
Python 學習筆記 - socketserver原始碼剖析
2021-09-09
Python筆記Server原始碼
new Vue發生了什麼
2019-11-06
Vue
Flutter學習筆記（35）--通知Notification
2020-06-19
Flutter筆記
Flutter學習筆記：Key的作用
2019-09-01
Flutter筆記
Flutter學習筆記（12）--列表元件
2019-07-29
Flutter筆記元件
【Flutter 學習筆記一】Mac OS 安裝 Flutter
2019-02-16
Flutter筆記Mac
vue原始碼學習筆記2（resolveConstructorOptions）
2019-03-13
Vue原始碼筆記Struct
MyBatis原始碼學習筆記(一) 初遇篇
2022-04-30
MyBatis原始碼筆記
Universal播放器的原始碼學習筆記
2019-01-08
播放器原始碼筆記
java.security.Provider 原始碼學習筆記
2019-01-19
JavaIDE原始碼筆記
Kafka學習筆記（一）：為什麼需要Kafka？
2018-03-25
Kafka筆記
Kafka 學習筆記（一）：為什麼需要 Kafka？
2018-03-14
Kafka筆記
Flutter學習筆記 - 安裝，映象，配置
2019-02-25
Flutter筆記
Flutter學習筆記（9）--元件Widget
2019-07-22
Flutter筆記元件
Flutter學習筆記（4）--Dart函式
2019-07-10
Flutter筆記Dart函式
Flutter學習筆記（5）--Dart運算子
2019-07-11
Flutter筆記Dart
Flutter學習筆記（13）--表單元件
2019-08-01
Flutter筆記元件
Flutter 學習筆記（一）：第一個 Flutter 應用
2021-08-31
Flutter筆記
雲端計算學習路線原始碼框架筆記：Mysql原始碼一
2019-11-30
原始碼框架筆記MySql
雲端計算學習路線原始碼框架筆記：Mysql原始碼二
2019-12-02
原始碼框架筆記MySql
雲端計算學習路線原始碼框架筆記：Mysql原始碼三
2019-12-02
原始碼框架筆記MySql
[webpack]原始碼解讀：命令列輸入webpack的時候都發生了什麼？
2017-01-04
Web原始碼命令列