前言

• Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等。 示意圖
• 今天，我將獻(xiàn)上一份《全面 & 詳細(xì)的Flutter學(xué)習(xí)指南》，希望你們會(huì)喜歡。

目錄

1. 簡介

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

2. 特點(diǎn)

• Flutter的主要特點(diǎn)包括：使用自身的高性能渲染引擎進(jìn)行渲染 & Dart編程語言語言
• 具體介紹如下：

2.1 高性能渲染引擎

• Flutter進(jìn)行UI繪制時(shí)，使用的是自帶的高性能渲染引擎進(jìn)行繪制渲染（不使用WebView & 原生控件）
• 好處：保證在Android和iOS上UI的一致性 & 避免對原生控件依賴而帶來的限制和維護(hù)成本。
• 組成：C、C ++、Dart、Skia（2D渲染引擎），具體描述如下：

特別注意：

• Flutter依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行
• Flutter Engine使用C/C++編寫 = 低延遲輸入 + 高幀速率
• 開發(fā)人員可通過Flutter框架和API在內(nèi)部進(jìn)行交互

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

2.2 Dart語言

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

特別注意：

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

Dart語言的特點(diǎn)

• Dart語言具備開發(fā)效率高、高性能 & 類型安全的特點(diǎn)
• 具體如下：

3. 原理解析

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

• Flutter框架主要分為兩層：FrameWork層、Engine層，如下圖所示：

• 說明：開發(fā)時(shí)，主要基于Framework層；運(yùn)行時(shí)，則是運(yùn)行在 Engine上。每層的具體介紹如下：

3.2 原理概述

• 開發(fā)時(shí)，主要基于Framework層；運(yùn)行時(shí)，則是運(yùn)行在 Engine上
• Engine是Flutter的獨(dú)立虛擬機(jī)，由它適配 & 提供跨平臺(tái)支持；因?yàn)槠浯嬖?，F(xiàn)lutter不使用移動(dòng)端系統(tǒng)的原生控件， 而是使用自己 Engine 來繪制 Widget （Flutter的顯示單元）； Dart 代碼是通過 AOT 編譯為平臺(tái)的原生代碼，所以 Flutter可直接與平臺(tái)通信，不需要JS引擎的橋接。
• 同時(shí) Flutter 唯一要求系統(tǒng)提供的是 canvas，以實(shí)現(xiàn)UI的繪制。

編譯時(shí)，具體如下：

3.3 關(guān)于widget

Flutter理念：“一切皆為Widget”，Widget是Flutter應(yīng)用程序用戶界面的基本構(gòu)建塊，具備以下特點(diǎn)：

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

4. 特點(diǎn)

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

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

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

4.2 高性能

• 原因1：通過其自帶的高性能渲染引擎進(jìn)行渲染
• 原因2：Dart語言本身的語言特性
• 原因3：編譯過程特點(diǎn)，具體如下：

5. 對比

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

5.1 React-Native

• 簡介 由Facebook出品，采用了JavaScript語言、JSCore引擎和通過原生渲染的跨平臺(tái)框架
• 實(shí)現(xiàn)原理 通過編寫JavaScript語言代碼，通過 React Native 的中間層來調(diào)用 Native端的組件，最終實(shí)現(xiàn)相應(yīng)的功能。JS端中所寫控件的作用類似 Map中的key 值，對應(yīng)著Native端的對應(yīng)控件（如 Android 中<view> 標(biāo)簽對應(yīng) ViewGroup 控件）。JS端會(huì)通過多個(gè)key 組合成Dom，最后交由Native端進(jìn)行解析，最終渲染出Native端的控件。

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

5.2 Weex

• 簡介 由Alibaba出品，采用了JavaScript語言、JS V8引擎和通過原生渲染的跨平臺(tái)框架
• 實(shí)現(xiàn)原理 與React-Native類似，JS端會(huì)通過多個(gè)key組合成Dom，最后交由Native端進(jìn)行解析，最終渲染出Native端的控件，但區(qū)別在于：Weex是可以跨三端的 = Android、iOS、Web，其原因在于在開發(fā)過程中，代碼模式、編譯過程、模板組件、數(shù)據(jù)綁定、生命周期等上層語法是一致，不同的是Web端和Native端對Virtual DOM 執(zhí)行的解析方法有所區(qū)別。

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

5.3 三者對比

注：對于性能的對比，從理論上來說Flutter應(yīng)該是最接近原生性能 & 最好的，但就目前實(shí)際應(yīng)用&體驗(yàn)中并沒具備很明顯的差異化，后續(xù)需進(jìn)行進(jìn)一步的驗(yàn)證。

6. 學(xué)習(xí)方式 & 資料

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

7. 總結(jié)

本文全面介紹了Flutter入門學(xué)習(xí)知識(shí)。

在這我也分享一份自己收錄整理的Android學(xué)習(xí)PDF+架構(gòu)視頻+面試文檔+源碼筆記，還有高級(jí)架構(gòu)技術(shù)進(jìn)階腦圖、Android開發(fā)面試專題資料，高級(jí)進(jìn)階架構(gòu)資料這些都是我閑暇還會(huì)反復(fù)翻閱的精品資料。在腦圖中，每個(gè)知識(shí)點(diǎn)專題都配有相對應(yīng)的實(shí)戰(zhàn)項(xiàng)目，可以有效的幫助大家掌握知識(shí)點(diǎn)。

總之也是在這里幫助大家學(xué)習(xí)提升進(jìn)階，也節(jié)省大家在網(wǎng)上搜索資料的時(shí)間來學(xué)習(xí)，也可以分享給身邊好友一起學(xué)習(xí)

如果你有需要的話，可以點(diǎn)贊+評論，關(guān)注我，然后私信我【進(jìn)階】我發(fā)給你