前言
-
Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發框架，正在被越來越多的開發者和組織使用，包括阿里的鹹魚、騰訊的微信等。
-
今天，我將獻上一份**《全面 & 詳細的Flutter學習指南》**，希望你們會喜歡。
目錄
1. 簡介
- 定義：一款Google出品&開源的移動客戶端UI開發框架（SDK）
- 作用：用一套程式碼同時在Android、iOS上快速構建高質量、高效能的原生使用者介面
- 開發語言：Dart語言（高開發效率、高效能等）
2. 特點
- Flutter的主要特點包括：使用自身的高效能渲染引擎進行渲染 & Dart程式語言語言
- 具體介紹如下：
2.1 高效能渲染引擎
- Flutter進行UI繪製時，使用的是自帶的高效能渲染引擎進行繪製渲染（不使用WebView & 原生控制元件）
- 好處：保證在Android和iOS上UI的一致性 & 避免對原生控制元件依賴而帶來的限制和維護成本。
- 組成：C、C ++、Dart、Skia（2D渲染引擎），具體描述如下：
特別注意：
- Flutter依靠Flutter Engine虛擬機器在iOS和Android上執行
- Flutter Engine使用C/C++編寫 = 低延遲輸入 + 高幀速率
- 開發人員可通過Flutter框架和API在內部進行互動
下面，簡單介紹一下Flutter的2D渲染引擎：Skia
2.2 Dart語言
- 介紹Dart語言前先介紹兩個概念：JIT和AOT。程式主要有兩種執行方式：靜態編譯 & 動態編譯，具體如下：
特別注意：
- JIT 和 AOT指的是程式執行方式，和程式語言並非強關聯的。
- 有些語言可以以JIT方式 & AOT方式一起執行，如Java，它可在第一次執行時編譯成中間位元組碼、然後在之後執行時可以直接執行位元組碼
- 通常區分是否為AOT的標準就是看程式碼在執行之前是否需要編譯，只要需要編譯，無論其編譯產物是位元組碼還是機器碼，都屬於AOT
Dart語言的特點
- Dart語言具備開發效率高、高效能 & 型別安全的特點
- 具體如下：
3. 原理解析
3.1 框架結構
-
Flutter框架主要分為兩層：FrameWork層、Engine層，如下圖所示：
-
說明：開發時，主要基於Framework層；執行時，則是執行在 Engine上。每層的具體介紹如下：
3.2 原理概述
-
開發時，主要基於Framework層；執行時，則是執行在 Engine上
-
Engine是Flutter的獨立虛擬機器，由它適配 & 提供跨平臺支援；因為其存在，Flutter不使用移動端系統的原生控制元件， 而是使用自己 Engine 來繪製 Widget （Flutter的顯示單元）； Dart 程式碼是通過 AOT 編譯為平臺的原生程式碼，所以 Flutter可直接與平臺通訊，不需要JS引擎的橋接。
-
同時 Flutter 唯一要求系統提供的是 canvas，以實現UI的繪製。
-
編譯時，具體如下：
3.3 關於widget
Flutter理念：“一切皆為Widget”，Widget是Flutter應用程式使用者介面的基本構建塊，具備以下特點：
- 屬於具有一致性的統一物件模型，與其他將檢視、控制器、佈局和其他屬性分離的框架不同。更新widget時更加高效
- 不可變的，僅支援一幀，且每一幀上不會直接更新，要更新而必須使用Widget的狀態。無狀態和有狀態Widget 的核心特性相同，每一幀都會重新構建；
- 有一個State物件，用於跨幀儲存狀態資料 & 恢復
4. 特點
- Flutter具備跨平臺、開發效率高 & 高效能的特點
- 具體說明如下：
4.1 跨平臺 & 開發效率高
Flutter通過使用上述所述的自身渲染引擎、原理框架 & Widget執行，使用一套程式碼即可同時構建iOS和Android應用，從而實現跨平臺的特性，最終提高開發的效率
4.2 高效能
- 原因1：通過其自帶的高效能渲染引擎進行渲染
- 原因2：Dart語言本身的語言特性
- 原因3：編譯過程特點，具體如下：
5. 對比
- 跨平臺開發的本質是為了：增加程式碼複用、減少不同平臺差異適配的工作量 & 提高開發效率。
- 目前主流的跨平臺開發框架有：React-Native、Weex和本文提及的Flutter。下面，我先簡單介紹React-Native和Weex，再進行三者的對比。
5.1 React-Native
-
簡介 由Facebook出品，採用了JavaScript語言、JSCore引擎和通過原生渲染的跨平臺框架
-
實現原理 通過編寫JavaScript語言程式碼，通過 React Native 的中間層來呼叫 Native端的元件，最終實現相應的功能。JS端中所寫控制元件的作用類似 Map中的key 值，對應著Native端的對應控制元件（如 Android 中
標籤對應 ViewGroup 控制元件）。JS端會通過多個key 組合成Dom，最後交由Native端進行解析，最終渲染出Native端的控制元件。 
-
實現框架 React Native的架構主要由三層實現。其中最重要的是由C++ 實現的中間適配層，此處最主要封裝了JavaScriptCore用於執行JS的解析，最終實現了JS端與原生端的雙向通訊互動。而React Native執行在JavaScriptCore中。（在iOS上直接使用內建的javascriptcore、在Android則使用webkit.org官方開源的jsc.so）
5.2 Weex
-
簡介 由Alibaba出品，採用了JavaScript語言、JS V8引擎和通過原生渲染的跨平臺框架
-
實現原理 與React-Native類似，JS端會通過多個key組合成Dom，最後交由Native端進行解析，最終渲染出Native端的控制元件，但區別在於：Weex是可以跨三端的 = Android、iOS、Web，其原因在於在開發過程中，程式碼模式、編譯過程、模板元件、資料繫結、生命週期等上層語法是一致，不同的是Web端和Native端對Virtual DOM 執行的解析方法有所區別。
-
實現框架 weex的架構主要分為三部分，具體如下：
5.3 三者對比
注：對於效能的對比，從理論上來說Flutter應該是最接近原生效能 & 最好的，但就目前實際應用&體驗中並沒具備很明顯的差異化，後續需進行進一步的驗證。
6. 學習方式 & 資料
- 官網：flutter.dev/ 快速入門 & 學習最好的方式是：閱讀Flutter官網的資源，同時官網也是瞭解最新Flutter發展動態的地方
- Flutter中文網社群：flutterchina.club 目前Flutter最大的中文資源社群，提供了：Flutter官網文件翻譯、開源專案 & 案例等學習資源
- StackOverflow：stackoverflow.com/ 活躍度最高的Flutter問答社群，Flutter開發團隊的成員也經常會在上面回答問題
- 原始碼：flutter.dev/docs/develo… Flutter SDK的原始碼具備以下特點：開源、示例 & 詳細註釋，Gallery是Flutter官方示例APP，其原始碼在Flutter原始碼“examples”目錄下
7. 總結
- 本文全面介紹了Flutter入門學習知識
- 接下來推出的文章，我將繼續講解Flutter的相關知識，包括使用語法、實戰等，感興趣的讀者可以繼續關注我的部落格哦：Carson_Ho的Android部落格