谷歌大會(huì)之后，有不少人咨詢了我 Flutter 相關(guān)的問(wèn)題，其中有不少是和面試相關(guān)的，如今一些招聘上也開(kāi)始羅列 Flutter 相關(guān)要求，最后想了想還是寫(xiě)一期總結(jié)吧，也算是  Flutter  的階段復(fù)習(xí)。

??系統(tǒng)完整的學(xué)習(xí)是必須需要的，這里只能幫你總結(jié)一些知識(shí)點(diǎn)，更多的還請(qǐng)查閱 Dart/Flutter 官網(wǎng)。

本篇主要是知識(shí)點(diǎn)總結(jié)，如有疑問(wèn)可點(diǎn)擊各文章鏈接了解詳情，或者查閱我 掘金專(zhuān)欄。

https:///user/582aca2ba22b9d006b59ae68/posts

其實(shí)學(xué)習(xí)過(guò) JavaScript 或者 Java/Kotlin 的人，在學(xué)習(xí) Dart 上幾乎是沒(méi)什么難度的，Dart 綜合了動(dòng)態(tài)語(yǔ)言和靜態(tài)語(yǔ)言的特性, 這里主要提供

一些不一樣，或者有意思的概念

1、Dart 屬于是強(qiáng)類(lèi)型語(yǔ)言 ，但可以用 var  來(lái)聲明變量，Dart 會(huì)自推導(dǎo)出數(shù)據(jù)類(lèi)型，var 實(shí)際上是編譯期的“語(yǔ)法糖”。dynamic 表示動(dòng)態(tài)類(lèi)型， 被編譯后，實(shí)際是一個(gè) object 類(lèi)型，在編譯期間不進(jìn)行任何的類(lèi)型檢查，而是在運(yùn)行期進(jìn)行類(lèi)型檢查。

2、Dart 中 if 等語(yǔ)句只支持 bool 類(lèi)型，switch 支持 String 類(lèi)型。

3、Dart 中數(shù)組和 List 是一樣的。

4、Dart 中，Runes 代表符號(hào)文字 ,  是 UTF-32 編碼的字符串, 用于如 Runes input = new Runes('?? ??');

5、Dart 支持閉包。

6、Dart 中 number 類(lèi)型分為 int 和 double ，沒(méi)有 float 類(lèi)型。

7、Dart 中 級(jí)聯(lián)操作符 可以方便配置邏輯，如下代碼：

8、賦值操作符

比較有意思的賦值操作符有：

AA ?? '999'  ///表示如果 AA 為空，返回999
AA ??= '999' ///表示如果 AA 為空，給 AA 設(shè)置成 999
AA ~/999 ///AA 對(duì)于 999 整除

9、可選方法參數(shù)

Dart 方法可以設(shè)置 參數(shù)默認(rèn)值 和 指定名稱 。

比如：getDetail(Sting userName, reposName, {branch = 'master'}){} 方法，這里 branch 不設(shè)置的話，默認(rèn)是 “master” 。參數(shù)類(lèi)型 可以指定或者不指定。

調(diào)用效果： 

getRepositoryDetailDao(“aaa', 'bbbb', branch: 'dev'); 。

10、作用域

Dart 沒(méi)有關(guān)鍵詞 public 、private 等修飾符，_ 下橫向直接代表 private ，但是有 @protected 注解 。

11、構(gòu)造方法

Dart 中的多構(gòu)造方法，可以通過(guò)命名方法實(shí)現(xiàn)。

默認(rèn)構(gòu)造方法只能有一個(gè)，而通過(guò) Model.empty() 方法可以創(chuàng)建一個(gè)空參數(shù)的類(lèi)，其實(shí)方法名稱隨你喜歡，而變量初始化值時(shí)，只需要通過(guò) this.name 在構(gòu)造方法中指定即可：

class ModelA {
  String name;
  String tag;

  //默認(rèn)構(gòu)造方法，賦值給name和tag
  ModelA(this.name, this.tag);

  //返回一個(gè)空的ModelA
  ModelA.empty();

  //返回一個(gè)設(shè)置了name的ModelA
  ModelA.forName(this.name);
}

12、getter setter 重寫(xiě)

Dart 中所有的基礎(chǔ)類(lèi)型、類(lèi)等都繼承 Object ，默認(rèn)值是 NULL， 自帶 getter 和 setter ，而如果是 final 或者 const 的話，那么它只有一個(gè) getter 方法，Object  都支持 getter、setter 重寫(xiě)：

13、Assert(斷言)

assert 只在檢查模式有效，在開(kāi)發(fā)過(guò)程中，assert(unicorn == null); 只有條件為真才正常，否則直接拋出異常，一般用在開(kāi)發(fā)過(guò)程中，某些地方不應(yīng)該出現(xiàn)什么狀態(tài)的判斷。

14、重寫(xiě)運(yùn)算符，如下所示重載 operator 后對(duì)類(lèi)進(jìn)行 +/- 操作。

class Vector {
  final int x, y;

  Vector(this.x, this.y);

  Vector operator +(Vector v) => Vector(x + v.x, y + v.y);
  Vector operator -(Vector v) => Vector(x - v.x, y - v.y);

  ···
}

void main() {
  final v = Vector(2, 3);
  final w = Vector(2, 2);

  assert(v + w == Vector(4, 5));
  assert(v - w == Vector(0, 1));
}

支持重載的操作符 ：

15. 類(lèi)、接口、繼承

Dart 中沒(méi)有接口，類(lèi)都可以作為接口，把某個(gè)類(lèi)當(dāng)做接口實(shí)現(xiàn)時(shí)，只需要使用 implements ，然后復(fù)寫(xiě)父類(lèi)方法即可。

Dart 中支持 mixins ，按照出現(xiàn)順序應(yīng)該為extends 、 mixins 、implements 。

Zone

Dart 中可通過(guò) Zone 表示指定代碼執(zhí)行的環(huán)境，類(lèi)似一個(gè)沙盒概念，在 Flutter 中 C++ 運(yùn)行 Dart 也是在 _runMainZoned 內(nèi)執(zhí)行 runZoned 方法啟動(dòng)，而我們也可以通過(guò) Zone ，在運(yùn)行環(huán)境內(nèi)捕獲全局異常等信息:

同時(shí)你可以給 runZoned 注冊(cè)方法，在需要時(shí)執(zhí)行回調(diào)，如下代碼所示，這樣的在一個(gè) Zone 內(nèi)任何地方，只要能獲取 onData 這個(gè) ZoneUnaryCallback，就都可以調(diào)用到 handleData

///最終需要處理的地方
handleData(result) {
  print('VVVVVVVVVVVVVVVVVVVVVVVVVVV');
  print(result);
}

///返回得到一個(gè) ZoneUnaryCallback 
var onData = Zone.current.registerUnaryCallback<dynamic, int>(handleData);

///執(zhí)行 ZoneUnaryCallback 返回?cái)?shù)據(jù)
Zone.current.runUnary(onData, 2);

異步邏輯可以通過(guò) scheduleMicrotask 可以插入異步執(zhí)行方法：

Zone.current.scheduleMicrotask((){
  //todo something
});

更多可參看 ：

《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十一、全面深入理解Stream)》

https:///post/5cc2acf86fb9a0321f042041

Future

Future 簡(jiǎn)單了說(shuō)就是對(duì) Zone 的封裝使用。

比如 Future.microtask 中主要是執(zhí)行了 Zone 的 scheduleMicrotask ，而 result._complete 最后調(diào)用的是 _zone.runUnary 等等。

  factory Future.microtask(FutureOr<T> computation()) {
    _Future<T> result = new _Future<T>();
    scheduleMicrotask(() {
      try {
        result._complete(computation());
      } catch (e, s) {
        _completeWithErrorCallback(result, e, s);
      }
    });
    return result;
  }

Dart 中可通過(guò) async/await 或者 Future 定義異步操作，而事實(shí)上 async/await 也只是語(yǔ)法糖，最終還是通過(guò)編譯器轉(zhuǎn)為 Future。

有興趣看這里 ：

generators

code_generator.dart

Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十一、全面深入理解Stream)

Stream

Stream 也是有對(duì)Zone 的另外一種封裝使用。

Dart 中另外一種異步操作， async* / yield 或者 Stream 可定義 Stream 異步，  async* / yield 也只是語(yǔ)法糖，最終還是通過(guò)編譯器轉(zhuǎn)為 Stream。

Stream 還支持同步操作。

1）、Stream 中主要有 Stream 、 StreamController 、StreamSink 和 StreamSubscription 四個(gè)關(guān)鍵對(duì)象，大致可以總結(jié)為：

StreamController ：如類(lèi)名描述，用于整個(gè)  Stream 過(guò)程的控制，提供各類(lèi)接口用于創(chuàng)建各種事件流。

StreamSink ：一般作為事件的入口，提供如 add   ，   addStream   等。

Stream ：事件源本身，一般可用于監(jiān)聽(tīng)事件或者對(duì)事件進(jìn)行轉(zhuǎn)換，如 listen 、where 。

StreamSubscription ：事件訂閱后的對(duì)象，表面上用于管理訂閱過(guò)等各類(lèi)操作，如 cacenl 、pause ，同時(shí)在內(nèi)部也是事件的中轉(zhuǎn)關(guān)鍵。

2)、一般通過(guò) StreamController 創(chuàng)建 Stream；通過(guò) StreamSink 添加事件；通過(guò) Stream 監(jiān)聽(tīng)事件；通過(guò) StreamSubscription 管理訂閱。

3）、Stream 中支持各種變化，比如map 、expand 、where 、take 等操作，同時(shí)支持轉(zhuǎn)換為 Future 。

更多可參看 ：

《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十一、全面深入理解Stream)》

https:///post/5cc2acf86fb9a0321f042041

Flutter 和 React Native 不同主要在于 Flutter UI是直接通過(guò) skia 渲染的 ，而 React Native 是將 js 中的控件轉(zhuǎn)化為原生控件，通過(guò)原生去渲染的  ，相關(guān)更多可查看：

《移動(dòng)端跨平臺(tái)開(kāi)發(fā)的深度解析》

https:///post/5b395eb96fb9a00e556123ef

Flutter 中存在 Widget 、 Element 、RenderObject 、Layer 四棵樹(shù)，其中 Widget 與 Element 是多對(duì)一的關(guān)系 

Element  中持有Widget 和 RenderObject ， 而 Element 與 RenderObject 是一一對(duì)應(yīng)的關(guān)系 ，

當(dāng) RenderObject 的 isRepaintBoundary 為 true 時(shí)，那么個(gè)區(qū)域形成一個(gè) Layer，所以不是每個(gè) RenderObject 都具有 Layer 的，因?yàn)檫@受 isRepaintBoundary 的影響。

更多相關(guān)可查閱 

《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(九、 深入繪制原理)》

https:///post/5ca0e0aff265da309728659a

Flutter 中 Widget 不可變，每次保持在一幀，如果發(fā)生改變是通過(guò) State 實(shí)現(xiàn)跨幀狀態(tài)保存，而真實(shí)完成布局和繪制數(shù)組的是 RenderObject ，  Element 充當(dāng)兩者的橋梁， State 就是保存在 Element 中。

Flutter 中的 BuildContext 只是接口，而  Element  實(shí)現(xiàn)了它。

Flutter 中 setState  其實(shí)是調(diào)用了 markNeedsBuild  ，該方法內(nèi)部標(biāo)記此Element 為 Dirty，然后在下一幀 WidgetsBinding.drawFrame 才會(huì)被繪制，這可以看出 setState 并不是立即生效的。

Flutter 中 RenderObject 在 attch/layout 之后會(huì)通過(guò) markNeedsPaint();  使得頁(yè)面重繪，流程大概如下：

通過(guò)isRepaintBoundary 往上確定了更新區(qū)域，通過(guò) requestVisualUpdate 方法觸發(fā)更新往下繪制。

正常情況 RenderObject 的布局相關(guān)方法調(diào)用順序是 ：layout ->  performResize -> performLayout -> markNeedsPaint ,  但是用戶一般不會(huì)直接調(diào)用  layout，而是通過(guò)  markNeedsLayout ，具體流程如下：

Flutter 中一般 json 數(shù)據(jù)從 String 轉(zhuǎn)為 Object 的過(guò)程中都需要先經(jīng)過(guò) Map 類(lèi)型。

Flutter 中 InheritedWidget 一般用于狀態(tài)共享，如Theme 、Localizations 、 MediaQuery 等，都是通過(guò)它實(shí)現(xiàn)共享狀態(tài)，這樣我們可以通過(guò) context 去獲取共享的狀態(tài)，比如 ThemeData theme = Theme.of(context);

在 Element 的 inheritFromWidgetOfExactType 方法實(shí)現(xiàn)里，有一個(gè) Map<Type, InheritedElement> _inheritedWidgets 的對(duì)象。

_inheritedWidgets 一般情況下是空的，只有當(dāng)父控件是 InheritedWidget 或者本身是 InheritedWidgets 時(shí)才會(huì)有被初始化，而當(dāng)父控件是 InheritedWidget  時(shí)，這個(gè) Map 會(huì)被一級(jí)一級(jí)往下傳遞與合并 。

所以當(dāng)我們通過(guò) context 調(diào)用 inheritFromWidgetOfExactType 時(shí)，就可以往上查找到父控件的 Widget 。

Flutter 中默認(rèn)主要通過(guò) runtimeType 和 key 判斷更新：

Flutter 中的生命周期

initState() 表示當(dāng)前 State 將和一個(gè) BuildContext 產(chǎn)生關(guān)聯(lián)，但是此時(shí)BuildContext 沒(méi)有完全裝載完成，如果你需要在該方法中獲取 BuildContext ，可以 new Future.delayed(const Duration(seconds: 0, (){//context}); 一下。

didChangeDependencies() 在 initState() 之后調(diào)用，當(dāng) State 對(duì)象的依賴關(guān)系發(fā)生變化時(shí)，該方法被調(diào)用，初始化時(shí)也會(huì)調(diào)用。

deactivate() 當(dāng) State 被暫時(shí)從視圖樹(shù)中移除時(shí)，會(huì)調(diào)用這個(gè)方法，同時(shí)頁(yè)面切換時(shí)，也會(huì)調(diào)用。

dispose()  Widget 銷(xiāo)毀了，在調(diào)用這個(gè)方法之前，總會(huì)先調(diào)用 deactivate()。

didUpdateWidge 當(dāng)  widget 狀態(tài)發(fā)生變化時(shí)，會(huì)調(diào)用。

通過(guò) StreamBuilder 和 FutureBuilder 我們可以快速使用 Stream 和 Future 快速構(gòu)建我們的異步控件: 

 《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十一、全面深入理解Stream)》

https:///post/5cc2acf86fb9a0321f042041

Flutter 中 runApp 啟動(dòng)入口其實(shí)是一個(gè) WidgetsFlutterBinding ，它主要是通過(guò) BindingBase 的子類(lèi) GestureBinding  、ServicesBinding  、 SchedulerBinding  、PaintingBinding  、SemanticsBinding  、 RendererBinding  、WidgetsBinding 等，通過(guò) mixins 的組合而成的。

Flutter 中的 Dart 的線程是以事件循環(huán)和消息隊(duì)列的形式存在，包含兩個(gè)任務(wù)隊(duì)列，一個(gè)是 microtask 內(nèi)部隊(duì)列，一個(gè)是 event 外部隊(duì)列，而 microtask 的優(yōu)先級(jí)又高于 event 。

因?yàn)?microtask 的優(yōu)先級(jí)又高于 event， 同時(shí)會(huì)阻塞event 隊(duì)列，所以如果 microtask 太多就可能會(huì)對(duì)觸摸、繪制等外部事件造成阻塞卡頓哦。

Flutter 中存在四大線程，分別為 UI Runner、GPU Runner、IO Runner， Platform Runner（原生主線程） ，同時(shí)在 Flutter 中可以通過(guò) isolate 或者 compute 執(zhí)行真正的跨線程異步操作。

PlatformView

Flutter 中通過(guò) PlatformView 可以嵌套原生 View 到 Flutter UI 中，這里面其實(shí)是使用了 Presentation + VirtualDisplay + Surface 等實(shí)現(xiàn)的，大致原理就是：

使用了類(lèi)似副屏顯示的技術(shù)，VirtualDisplay 類(lèi)代表一個(gè)虛擬顯示器，調(diào)用 DisplayManager 的 createVirtualDisplay() 方法，將虛擬顯示器的內(nèi)容渲染在一個(gè) Surface 控件上，然后將 Surface 的 id 通知給 Dart，讓 engine 繪制時(shí)，在內(nèi)存中找到對(duì)應(yīng)的 Surface 畫(huà)面內(nèi)存數(shù)據(jù)，然后繪制出來(lái)。em...  實(shí)時(shí)控件截圖渲染顯示技術(shù)。

Flutter 的 Debug 下是 JIT 模式，release下是AOT模式。

Flutter 中可以通過(guò) mixins AutomaticKeepAliveClientMixin  ，然后重寫(xiě) wantKeepAlive 保持住頁(yè)面，記得在被保持住的頁(yè)面 build 中調(diào)用 super.build 。（因?yàn)?mixins 特性）。

Flutter 手勢(shì)事件主要是通過(guò)競(jìng)技判斷的：

主要有 hitTest 把所有需要處理的控件對(duì)應(yīng)的 RenderObject ， 從  child 到 parent 全部組合成列表，從最里面一直添加到最外層。

然后從隊(duì)列頭的 child 開(kāi)始 for 循環(huán)執(zhí)行 handleEvent 方法，執(zhí)行 handleEvent 的過(guò)程不會(huì)被攔截打斷。

一般情況下 Down 事件不會(huì)決出勝利者，大部分時(shí)候是在 MOVE 或者 UP 的時(shí)候才會(huì)決出勝利者。

競(jìng)技場(chǎng)關(guān)閉時(shí)只有一個(gè)的就直接勝出響應(yīng)，沒(méi)有勝利者就拿排在隊(duì)列第一個(gè)強(qiáng)制勝利響應(yīng)。

同時(shí)還有 didExceedDeadline 處理按住時(shí)的 Down 事件額外處理，同時(shí)手勢(shì)處理一般在 GestureRecognizer 的子類(lèi)進(jìn)行。

更多詳細(xì)請(qǐng)查看：

《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十三、全面深入觸摸和滑動(dòng)原理)》

https:///post/5cd54839f265da03b2044c32

Flutter 中 ListView 滑動(dòng)其實(shí)都是通過(guò)改變 ViewPort 中的 child 布局來(lái)實(shí)現(xiàn)顯示的。

常用狀態(tài)管理的：目前有 scope_model 、flutter_redux 、fish_redux 、bloc + Stream 等幾種模式，具體可見(jiàn) : 

《Flutter完整開(kāi)發(fā)實(shí)戰(zhàn)詳解(十二、全面深入理解狀態(tài)管理設(shè)計(jì))》

https:///post/5cc816866fb9a03231209c7c

Platform Channel

Flutter 中可以通過(guò) Platform Channel 讓 Dart 代碼和原生代碼通信的：

• BasicMessageChannel ：用于傳遞字符串和半結(jié)構(gòu)化的信息。

• MethodChannel ：用于傳遞方法調(diào)用（method invocation）。

• EventChanne l: 用于數(shù)據(jù)流（event streams）的通信。

同時(shí) Platform Channel 并非是線程安全的 ，更多詳細(xì)可查閱閑魚(yú)技術(shù)的 

《深入理解Flutter Platform Channel》

https://www.jianshu.com/p/39575a90e820

其中基礎(chǔ)數(shù)據(jù)類(lèi)型映射如下：

Android 啟動(dòng)頁(yè)

Android 中 Flutter 默認(rèn)啟動(dòng)時(shí)會(huì)在 FlutterActivityDelegate.java 中讀取 AndroidManifset.xml 內(nèi) meta-data 標(biāo)簽，其中 io.flutter.app.android.SplashScreenUntilFirstFrame 標(biāo)志位如果為 ture ，就會(huì)啟動(dòng) Splash 畫(huà)面效果（類(lèi)似IOS的啟動(dòng)頁(yè)面）。

啟動(dòng)時(shí)原生代碼會(huì)讀取 android.R.attr.windowBackground  得到指定的 Drawable ， 用于顯示啟動(dòng)閃屏效果，之后并且通過(guò) flutterView.addFirstFrameListener，在onFirstFrame 中移除閃屏。

好了，暫時(shí)都這里了，有問(wèn)題修改會(huì)或則補(bǔ)充的，后面再加上。

資源推薦

Github ：

https://github.com/CarGuo

本文Demo ：

https://github.com/CarGuo/state_manager_demo

本文代碼 ：

https://github.com/CarGuo/GSYGithubAppFlutter

完整開(kāi)源項(xiàng)目推薦：

GSYGithubApp Flutter

https://github.com/CarGuo/GSYGithubAppFlutter

GSYGithubApp React Native

https://github.com/CarGuo/state_manager_demo

GSYGithubAppWeex

https://github.com/CarGuo/GSYGithubAppWeex