image.png

前言

• Flutter 作為Google出品的一個新興的跨平臺移動客戶端UI開發(fā)框架，正在被越來越多的開發(fā)者和組織使用帖努，包括阿里的咸魚撰豺、騰訊的微信等。
  

  示意圖

• 今天拼余，我將獻上一份《全面 & 詳細的Flutter學習指南》污桦，希望你們會喜歡。

示意圖

目錄

示意圖

1. 簡介

• 定義：一款Google出品&開源的移動客戶端UI開發(fā)框架（SDK）
• 作用：用一套代碼同時在Android、iOS上快速構(gòu)建高質(zhì)量、高性能的原生用戶界面
• 開發(fā)語言：Dart語言（高開發(fā)效率砌滞、高性能等）

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++編寫 = 低延遲輸入 + 高幀速率
• 開發(fā)人員可通過Flutter框架和API在內(nèi)部進行交互

下面，簡單介紹一下Flutter的2D渲染引擎：Skia

示意圖

2.2 Dart語言

• 介紹Dart語言前先介紹兩個概念：JIT和AOT。程序主要有兩種運行方式：靜態(tài)編譯 & 動態(tài)編譯绍载，具體如下：

  
  
  示意圖

特別注意：

• JIT 和 AOT指的是程序運行方式诡宗，和編程語言并非強關(guān)聯(lián)的。
• 有些語言可以以JIT方式 & AOT方式一起運行击儡，如Java塔沃，它可在第一次執(zhí)行時編譯成中間字節(jié)碼、然后在之后執(zhí)行時可以直接執(zhí)行字節(jié)碼
• 通常區(qū)分是否為AOT的標準就是看代碼在執(zhí)行之前是否需要編譯阳谍，只要需要編譯蛀柴，無論其編譯產(chǎn)物是字節(jié)碼還是機器碼，都屬于AOT

Dart語言的特點

• Dart語言具備開發(fā)效率高矫夯、高性能 & 類型安全的特點

• 具體如下：

  
  
  示意圖

3. 原理解析

3.1 框架結(jié)構(gòu)

Flutter框架主要分為三層

• 框架層（FrameWork）
• 引擎層（Engine）
• 嵌入層（Embedder）

image.png

3.2 原理概述

• 開發(fā)時鸽疾，主要基于Framework層；運行時训貌，則是運行在 Engine上

• Engine是Flutter的獨立虛擬機制肮，由它適配 & 提供跨平臺支持；因為其存在递沪，F(xiàn)lutter不使用移動端系統(tǒng)的原生控件豺鼻， 而是使用自己 Engine 來繪制 Widget （Flutter的顯示單元）； Dart 代碼是通過 AOT 編譯為平臺的原生代碼款慨，所以 Flutter可直接與平臺通信儒飒，不需要JS引擎的橋接。

• 同時 Flutter 唯一要求系統(tǒng)提供的是 canvas檩奠，以實現(xiàn)UI的繪制桩了。

  
  
  示意圖

• 編譯時，具體如下：

  
  
  示意圖

3.3 關(guān)于widget

Flutter理念：“一切皆為Widget”埠戳，Widget是Flutter應用程序用戶界面的基本構(gòu)建塊井誉，具備以下特點：

• 屬于具有一致性的統(tǒng)一對象模型，與其他將視圖乞而、控制器、布局和其他屬性分離的框架不同慢显。更新widget時更加高效
• 不可變的爪模，僅支持一幀，且每一幀上不會直接更新荚藻，要更新而必須使用Widget的狀態(tài)屋灌。無狀態(tài)和有狀態(tài)Widget 的核心特性相同，每一幀都會重新構(gòu)建应狱；
• 有一個State對象共郭，用于跨幀存儲狀態(tài)數(shù)據(jù) & 恢復

4. 特點

• Flutter具備跨平臺、開發(fā)效率高 & 高性能的特點
• 具體說明如下：

4.1 跨平臺 & 開發(fā)效率高

Flutter通過使用上述所述的自身渲染引擎、原理框架 & Widget運行除嘹，使用一套代碼即可同時構(gòu)建iOS和Android應用写半，從而實現(xiàn)跨平臺的特性，最終提高開發(fā)的效率

4.2 高性能

• 原因1：通過其自帶的高性能渲染引擎進行渲染
• 原因2：Dart語言本身的語言特性

• 原因3：編譯過程特點尉咕，具體如下：

  
  
  示意圖

5. 對比

• 跨平臺開發(fā)的本質(zhì)是為了：增加代碼復用叠蝇、減少不同平臺差異適配的工作量 & 提高開發(fā)效率。
• 目前主流的跨平臺開發(fā)框架有：React-Native年缎、Weex和本文提及的Flutter悔捶。下面，我先簡單介紹React-Native和Weex单芜，再進行三者的對比蜕该。

示意圖

5.1 React-Native

• 簡介
  由Facebook出品，采用了JavaScript語言洲鸠、JSCore引擎和通過原生渲染的跨平臺框架

• 實現(xiàn)原理
  通過編寫JavaScript語言代碼堂淡，通過 React Native 的中間層來調(diào)用 Native端的組件，最終實現(xiàn)相應的功能坛怪。JS端中所寫控件的作用類似 Map中的key 值淤齐，對應著Native端的對應控件（如 Android 中<view> 標簽對應 ViewGroup 控件）。JS端會通過多個key 組合成Dom袜匿，最后交由Native端進行解析更啄，最終渲染出Native端的控件。

  
  
  示意圖

• 實現(xiàn)框架
  React Native的架構(gòu)主要由三層實現(xiàn)居灯。其中最重要的是由C++ 實現(xiàn)的中間適配層祭务，此處最主要封裝了JavaScriptCore用于執(zhí)行JS的解析，最終實現(xiàn)了JS端與原生端的雙向通信交互怪嫌。而React Native運行在JavaScriptCore中义锥。（在iOS上直接使用內(nèi)置的javascriptcore、在Android則使用webkit.org官方開源的jsc.so）

示意圖

5.2 Weex

• 簡介
  由Alibaba出品岩灭，采用了JavaScript語言拌倍、JS V8引擎和通過原生渲染的跨平臺框架

• 實現(xiàn)原理
  與React-Native類似，JS端會通過多個key組合成Dom噪径，最后交由Native端進行解析柱恤，最終渲染出Native端的控件，但區(qū)別在于：Weex是可以跨三端的 = Android找爱、iOS梗顺、Web，其原因在于在開發(fā)過程中车摄，代碼模式寺谤、編譯過程仑鸥、模板組件、數(shù)據(jù)綁定变屁、生命周期等上層語法是一致眼俊，不同的是Web端和Native端對Virtual DOM 執(zhí)行的解析方法有所區(qū)別。

  
  
  示意圖

• 實現(xiàn)框架
  weex的架構(gòu)主要分為三部分敞贡，具體如下：

  
  
  示意圖

5.3 三者對比

示意圖

注：對于性能的對比泵琳，從理論上來說Flutter應該是最接近原生性能 & 最好的，但就目前實際應用&體驗中并沒具備很明顯的差異化誊役，后續(xù)需進行進一步的驗證获列。

6. 學習方式 & 資料

• 官網(wǎng)：https://flutter.dev/
  快速入門 & 學習最好的方式是：閱讀Flutter官網(wǎng)的資源，同時官網(wǎng)也是了解最新Flutter發(fā)展動態(tài)的地方
• Flutter中文網(wǎng)社區(qū)：https://flutterchina.club
  目前Flutter最大的中文資源社區(qū)蛔垢，提供了：Flutter官網(wǎng)文檔翻譯击孩、開源項目 & 案例等學習資源
• StackOverflow：https://stackoverflow.com/
  活躍度最高的Flutter問答社區(qū)，F(xiàn)lutter開發(fā)團隊的成員也經(jīng)常會在上面回答問題
• 源碼：https://flutter.dev/docs/development/tools/sdk/releases
  Flutter SDK的源碼具備以下特點：開源鹏漆、示例 & 詳細注釋巩梢，Gallery是Flutter官方示例APP，其源碼在Flutter源碼“examples”目錄下

7. 總結(jié)

本文全面介紹了Flutter入門學習知識艺玲，接下來推出的文章括蝠，我將繼續(xù)講解Flutter的相關(guān)知識，包括使用語法饭聚、實戰(zhàn)等忌警，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力秒梳！

相關(guān)文章閱讀
Android開發(fā)：最全面法绵、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析

歡迎關(guān)注Carson_Ho的簡書酪碘！

不定期分享關(guān)于安卓開發(fā)的干貨朋譬，追求短、平兴垦、快徙赢，但卻不缺深度。

參考文章：
https://flutterchina.club/
https://juejin.im/post/5ad6b8db6fb9a028c42eb90a
https://book.flutterchina.club/chapter1/flutter_intro.html
https://juejin.im/post/5afd77466fb9a07aab2a12da
http://www.reibang.com/p/7e0bd4708ba7
https://juejin.im/post/5b3c8a4be51d4519935860d5