為什么需要 Flutter

Flutter 通過自建繪制引擎，具備與 Native 相媲美的性能，同時能夠磨平平臺開發的差異性。

Flutter 架構

Flutter 架構可分為 Dart APP 層、Flutter 框架層、引擎層（面向操作系統的 C++ 引擎以及面前 Web 的 Web 引擎）、平臺嵌入層。

Flutter 框架層

Flutter 框架層實現一套基礎庫用于處理動畫、繪圖和手勢，在這之上 Rendering 層用于組件的底層渲染的結構數據，Widgets 層面向開發者提供一套描述視圖結構的語言，并基于繪圖封裝了兩種風格的 UI 組件庫

底層引擎層

引擎層可分為 C++ 引擎和 Web 引擎，其中 C++ 引擎包括 Skia 渲染引擎、Dart 運行時以及文字排版引擎等

設計思想

Widget 是視圖的基本單元和配置信息

視圖以 Widget 為單位，Widget 的狀態描述了頁面的狀態，狀態發生變化，Widget 會重新構建 Widget。

Widget 有以下特點：

• widget 是不可變的

  Flutter 中 widget 重建是頻繁發生，因此經常需要進行新舊 widget 樹的比較。為了降低比較時間采用淺比較，widget 的 Immutable 特性能夠很好契合這一使用場景。只要 widget 發生變化，就會返回一個新的 widget，從舊的 widget 創建一個新的 widget 采用了優化算法，達到快速比較和快速創建的性能

最小顆粒度更新渲染樹

Flutter 會比對前后狀態的變化，以確定底層渲染樹從一個狀態切換到下一個狀態所需要的最小改變。

渲染流水線

Flutter 渲染視圖的本質就是在 Vsync 信號中，通過 UI 線程快速的構建并生成抽象的視圖結構數據，并將抽象視圖結構數據發送給 GPU 線程，GPU 線程將視圖結構數據進行光柵化和上屏；

首先從宏觀上理解 Flutter 的渲染流水線：

• Flutter 引擎啟動時，通過平臺線程，向系統注冊接收 Vsync 信號的回調
• UI 線程接收到 Vsync 信號后，會構建三棵樹（widget/element/RenderObject）并生成布局信息，這一工作主要在 Flutter 框架層處理
• 根據布局信息進行繪制，生成一系列的繪制指令組成 layer tree，這一工作主要在 Flutter 框架層處理
• GPU 線程從 UI 線程中獲取 layer tree，進行光柵化和上屏操作，這一工作主要在底層引擎層處理
• 然后請求接收系統下一次的 Vsync 信號，又回到第 2 步

線程模型

理解 Flutter 的渲染流水線，需要先理解 Flutter 的線程模型，Flutter 的四大線程配合來完成渲染 UI 工作：

值得注意的是，Flutter Engine自己不創建管理線程。Flutter Engine線程的創建和管理是由embedder負責的。Embeder指的是將引擎移植到平臺的中間層代碼。

• Platform 線程： Flutter 線程模型中的主線程，負責提供 Native 窗口，作為 GPU 渲染的目標。接受平臺的 VSync 信號并發送到 UI 線程，驅動渲染管線運行。
• UI 線程： 負責 UI 組件管理，維護 3 顆樹，Dart VM 管理，UI 渲染指令生成。同時負責把承載渲染指令的 LayerTree 提交給 GPU 線程去光柵化。
• GPU 線程： 通過 flow 模塊完成光柵化，并調用底層渲染 API（opengl/vulkan/meta），合成并輸出到屏幕。
• IO 線程： 包括若干 worker 線程會去請求圖片資源并完成圖片解碼，之后在 IO 線程中生成紋理并上傳 GPU ，由于通過和 GPU 線程共享 EGL Context，在 GPU 線程中可以直接使用 IO 線程上傳的紋理，通過并行化，提高渲染的性能

UI 線程

當用于描述 UI 的 widget 樹發生變化，會觸發 build 階段，build 階段后會進入 layout 階段生成 RenderObject tree，layout 完后進入 paint 階段生成繪制指令 layer tree。

build 階段

Flutter 對視圖結構的抽象描述采用了三棵樹：widget tree、element tree 和 render tree。可把它們類比成：

widget tree => jsx
element tree => virtual dom
render tree => rendering tree (dom + cssom)

widget tree

widget tree 是 Dart 代碼中所寫的組件結構，描述 UI 元素的配置信息，widget 是 immutable 的，如果 widget 的狀態發生更新，則會進行重建。實際業務場景中， widget 會頻繁進行重建；

element tree

element tree 是 widget 的一種抽象，是視圖中真正顯示的元素，也是連接 widget tree 和 render tree 的橋梁；

當 widget 掛載到 widget tree 的時候，會調用 widget.createElement() 方法，創建其對應的 Element。Flutter 再將這個 Element 掛載到 element tree 并持有創建它的 widget 的引用

當 widget 發生變化時，會將其 element 標記為 dirty element，在下一次更新視圖時根據這個狀態只更新被修改的內容，從而提升渲染性能；

element 的更新時機是根據 widget 的兩個屬性進行的：

• widget 的類型，前后組件是否為同一個類所創建
• widget key

如果二者都沒發生改變，則會復用該 element，并將新的 widget 配置數據更新到 element；

render tree

render tree 是真正進行組件布局渲染的工作，render tree 每個節點都是繼承自 RenderObject 類對象，其由 Element 中的 renderObject 或 RenderObjectWidget 的 createRenderObject 方法生成；

布局階段

UI 線程根據 RenderObject tree 進行布局，具體可分為兩個線性過程：從頂部往下傳遞布局約束，從底部往上傳遞布局信息：

繪制階段

UI 線程根據 RenderObject tree 生成繪制指令并形成 layer tree

狀態管理

StatefulWidget

Flutter 的 widget 可分為 StatefulWidget 和 StatelessWidget。

• stateless widget

  stateless widget 沒有自己的內部狀態，只用于展示從外部傳遞的或是內部的靜態數據

• stateful widget

  stateful widget 擁有自己的狀態用于對外部做出反饋，widget 的狀態保存在一個 State 對象中，并通過 setState 去重構 widget

StatefulWidget 的生命周期

• 當 stateful widget 掛載到 widget 樹時，會調用 widget.createState() 方法
• 新創建的 State 會和 BuildContext（widget 對應的 element） 關聯，此時 initState 會調用
• 當 statefulWidget 使用 InheritedWidget 的數據時，并且 InheritedWidget 的 updateShouldNotify() 返回 true 時，說明 statefulWidget 的依賴數據發生變化，因此會觸發 didChangeDependencies()
• 進入 build 階段構建視圖
• 當 State 暫時從視圖樹中移除或是頁面切換時，該函數就會調用
• 當 State 被永久從視圖樹中移除，該函數會調用
• 當 widget 的配置發生變化時就會調用這個函數，例如 hot-reload
• setState 會重新觸發 build

理解 setState 的更新機制

setState()過程主要工作是記錄所有的臟元素，添加到BuildOwner對象的_dirtyElements成員變量，然后調用scheduleFrame來注冊Vsync回調。 當下一次vsync信號的到來時會執行handleBeginFrame()和handleDrawFrame()來更新UI。

狀態管理機制

• widget 自己管理自己的狀態

  狀態是 UI 狀態，交由 widget 自身管理

• 父 widget 管理子 widget 狀態

  狀態是用戶數據，交由父 widget 管理

• 混合管理

widget 間的通信機制

• 父 widget 向子 widget 通信

  通過實例化子 widget 并向子 widget 傳值到子 widget 的實例屬性

• 子 widget 向父 widget 通信

  通過設置回調函數形式

• 兄弟組件間通信

  • 通過將數據掛載到同一個父組件
  • 數據共享的數量較少，使用 InheritedWidget(React Context)

• 跨組件通信

  • 從上往下

    InheritedWidget

    class ShareDataWidget extends InheritedWidget {
      ShareDataWidget({
        @required this.data,
        Widget child
      }) :super(child: child);
    
      final int data; //需要在子樹中共享的數據，保存點擊次數
    
      //定義一個便捷方法，方便子樹中的widget獲取共享數據  
      static ShareDataWidget of(BuildContext context) {
        return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
      }
    
      //該回調決定當data發生變化時，是否通知子樹中依賴data的Widget  
      @override
      bool updateShouldNotify(ShareDataWidget old) {
        //如果返回true，則子樹中依賴(build函數中有調用)本widget
        //的子widget的`state.didChangeDependencies`會被調用
        return old.data != data;
      }
    }
    
    class _TestWidget extends StatefulWidget {
      @override
      __TestWidgetState createState() => new __TestWidgetState();
    }
    
    class __TestWidgetState extends State<_TestWidget> {
      @override
      Widget build(BuildContext context) {
        //使用InheritedWidget中的共享數據
        return Text(ShareDataWidget
            .of(context)
            .data
            .toString());
      }
    
      @override
      void didChangeDependencies() {
        super.didChangeDependencies();
        //父或祖先widget中的InheritedWidget改變(updateShouldNotify返回true)時會被調用。
        //如果build中沒有依賴InheritedWidget，則此回調不會被調用。
        print("Dependencies change");
      }
    }
    
    class InheritedWidgetTestRoute extends StatefulWidget {
      @override
      _InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
    }
    
    class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
      int count = 0;
    
      @override
      Widget build(BuildContext context) {
        return  Center(
          child: ShareDataWidget( //使用ShareDataWidget
            data: count,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 20.0),
                  child: _TestWidget(),//子widget中依賴ShareDataWidget
                ),
                RaisedButton(
                  child: Text("Increment"),
                  //每點擊一次，將count自增，然后重新build,ShareDataWidget的data將被更新  
                  onPressed: () => setState(() => ++count),
                )
              ],
            ),
          ),
        );
      }
    }
    
    

  • 從下往上

    Notification 通知冒泡

    class MyNotification extends Notification {
        final String msg;
        Mynotification(this.msg);
    }
    
    class NotificationRoute extends StatefulWidget {
        @override
        NotificationRouteState createState() {
            return new NotificationRouteState();
        }
    }
    
    class NotificationRouteState extends State<NotificationRoute> {
        String _msg = "";
        @override
        Widget build(BuildContext context) {
            return NotificationListener<MyNotification>(
                onNotification: (notification) {
                    setState(() => { _msg += notification.msg + " "; })
                    return true;
                },
                child: RaisedButton( 
                    onPressed: () => MyNotification('hi'),dispatch(context),
                    child: Text('Send Notification'),
                ),
            );
        }
    }
    
    

• Event Bus

  適用于共享數據量較少的跨組件通信場景

• 狀態管理工具

  • flutter_redux
  • flutter_mobx
  • bloc

參考資料

Flutter原理：三棵重要的樹(渲染過程、布局約束、應用視圖的構建等)

硬件繪圖原理

Flutter 實戰

Flutter 跨平臺演進及架構開篇

Flutter UI 繪制原理引導

Flutter WebView 與 JS 通信

Flutter WebView與JS交互簡易指南

Dart