Flutter 面試知識(shí)點(diǎn)集錦

Dart 部分

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

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

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

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

5、Dart 支持閉包。

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

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

event
  ..id = 1
  ..type = ""
  ..actor = "";

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ù)類型 可以指定或者不指定。調(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ù)的類，其實(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ǔ)類型、類等都繼承 Object ，默認(rèn)值是 NULL， 自帶 getter 和 setter ，而如果是 final 或者 const 的話，那么它只有一個(gè) getter 方法，Object 都支持 getter、setter 重寫(xiě)：

  @override
  Size get preferredSize {
    return Size.fromHeight(kTabHeight + indicatorWeight);
  }

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ì)類進(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));
}

支持重載的操作符 ：


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

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

Zone

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

  runZoned(() {
    runApp(FlutterReduxApp());
  }, onError: (Object obj, StackTrace stack) {
    print(obj);
    print(stack);
  });

同時(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
});

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。

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 ：如類名描述，用于整個(gè) Stream 過(guò)程的控制，提供各類接口用于創(chuàng)建各種事件流。
  • StreamSink ：一般作為事件的入口，提供如 add ， addStream 等。
  • Stream ：事件源本身，一般可用于監(jiān)聽(tīng)事件或者對(duì)事件進(jìn)行轉(zhuǎn)換，如 listen 、where 。
  • StreamSubscription ：事件訂閱后的對(duì)象，表面上用于管理訂閱過(guò)等各類操作，如 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 部分

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

  • 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 的影響。

  • 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è)面重繪，流程大概如下：

image.png

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

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

<figcaption></figcaption>

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

  • 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 判斷更新：
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.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 銷毀了，在調(diào)用這個(gè)方法之前，總會(huì)先調(diào)用 deactivate()。

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

image.png

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

  • Flutter 中 runApp 啟動(dòng)入口其實(shí)是一個(gè) WidgetsFlutterBinding ，它主要是通過(guò) BindingBase 的子類 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)的，大致原理就是：

使用了類似副屏顯示的技術(shù)，VirtualDisplay 類代表一個(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 的子類進(jìn)行。

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

  • 常用狀態(tài)管理的：目前有 scope_model 、flutter_redux 、fish_redux 、bloc + Stream 等幾種模式，

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》

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

image.png

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à)面效果（類似IOS的啟動(dòng)頁(yè)面）。

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

創(chuàng)作不易喜歡的話記得點(diǎn)贊+關(guān)注哦

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容