Android跨平臺入門：手把手帶你快速入門Flutter！

前言

• 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博客

---

請點贊 / 評論幫頂！由於大家的贊同/鼓勵是我寫做的最大動力！