Flutter實(shí)戰(zhàn) 初識Flutter

1.2.1 Flutter簡介

Flutter 是 Google 推出并開源的移動應(yīng)用開發(fā)框架，主打跨平臺、高保真、高性能。開發(fā)者可以通過 Dart 語言開發(fā) App，一套代碼同時運(yùn)行在 iOS 和 Android 平臺。 Flutter 提供了豐富的組件、接口，開發(fā)者可以很快地為 Flutter 添加 native 擴(kuò)展。同時 Flutter還使用 Native 引擎渲染視圖，這無疑能為用戶提供良好的體驗(yàn)。

#跨平臺自繪引擎

Flutter 與用于構(gòu)建移動應(yīng)用程序的其它大多數(shù)框架不同，因?yàn)?Flutter 既不使用 WebView，也不使用操作系統(tǒng)的原生控件。 相反，F(xiàn)lutter 使用自己的高性能渲染引擎來繪制 widget。這樣不僅可以保證在 Android 和 iOS 上 UI 的一致性，而且也可以避免對原生控件依賴而帶來的限制及高昂的維護(hù)成本。

Flutter 使用 Skia 作為其 2D 渲染引擎，Skia 是 Google 的一個 2D 圖形處理函數(shù)庫，包含字型、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖都有高效能且簡潔的表現(xiàn)，Skia 是跨平臺的，并提供了非常友好的 API，目前 Google Chrome 瀏覽器和 Android 均采用 Skia 作為其繪圖引擎。

目前 Flutter 默認(rèn)支持 iOS、Android、Fuchsia（Google 新的自研操作系統(tǒng)）三個移動平臺。但 Flutter 亦可支持 Web 開發(fā)（Flutter for web）和PC開發(fā)，本書的示例和介紹主要是基于 iOS 和 Android 平臺的，其它平臺讀者可以自行了解。

#高性能

Flutter高性能主要靠兩點(diǎn)來保證，首先，F(xiàn)lutter APP 采用 Dart 語言開發(fā)。Dart 在 JIT（即時編譯）模式下，速度與 JavaScript 基本持平。但是 Dart 支持 AOT，當(dāng)以 AOT 模式運(yùn)行時，JavaScript 便遠(yuǎn)遠(yuǎn)追不上了。速度的提升對高幀率下的視圖數(shù)據(jù)計(jì)算很有幫助。其次，F(xiàn)lutter 使用自己的渲染引擎來繪制 UI，布局?jǐn)?shù)據(jù)等由Dart語言直接控制，所以在布局過程中不需要像RN那樣要在 JavaScript 和 Native 之間通信，這在一些滑動和拖動的場景下具有明顯優(yōu)勢，因?yàn)樵诨瑒雍屯蟿舆^程往往都會引起布局發(fā)生變化，所以 JavaScript 需要和 Native 之間不停的同步布局信息，這和在瀏覽器中要JavaScript頻繁操作DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

#采用Dart語言開發(fā)

這是一個很有意思，但也很有爭議的問題，在了解 Flutter 為什么選擇了 Dart 而不是 JavaScript 之前我們先來介紹兩個概念：JIT 和 AOT。

目前，程序主要有兩種運(yùn)行方式：靜態(tài)編譯與動態(tài)解釋。靜態(tài)編譯的程序在執(zhí)行前全部被翻譯為機(jī)器碼，通常將這種類型稱為AOT （Ahead of time）即 “提前編譯”；而解釋執(zhí)行的則是一句一句邊翻譯邊運(yùn)行，通常將這種類型稱為JIT（Just-in-time）即“即時編譯”。AOT程序的典型代表是用C/C++開發(fā)的應(yīng)用，它們必須在執(zhí)行前編譯成機(jī)器碼，而JIT的代表則非常多，如JavaScript、python等，事實(shí)上，所有腳本語言都支持JIT模式。但需要注意的是JIT和AOT指的是程序運(yùn)行方式，和編程語言并非強(qiáng)關(guān)聯(lián)的，有些語言既可以以JIT方式運(yùn)行也可以以AOT方式運(yùn)行，如Java、Python，它們可以在第一次執(zhí)行時編譯成中間字節(jié)碼、然后在之后執(zhí)行時可以直接執(zhí)行字節(jié)碼，也許有人會說，中間字節(jié)碼并非機(jī)器碼，在程序執(zhí)行時仍然需要動態(tài)將字節(jié)碼轉(zhuǎn)為機(jī)器碼，是的，這沒有錯，不過通常我們區(qū)分是否為AOT的標(biāo)準(zhǔn)就是看代碼在執(zhí)行之前是否需要編譯，只要需要編譯，無論其編譯產(chǎn)物是字節(jié)碼還是機(jī)器碼，都屬于AOT。在此，讀者不必糾結(jié)于概念，概念就是為了傳達(dá)精神而發(fā)明的，只要讀者能夠理解其原理即可，得其神忘其形。

現(xiàn)在我們看看 Flutter 為什么選擇 Dart 語言？筆者根據(jù)官方解釋以及自己對 Flutter 的理解總結(jié)了以下幾條（由于其它跨平臺框架都將 JavaScript 作為其開發(fā)語言，所以主要將 Dart 和 JavaScript 做一個對比）：

1. 開發(fā)效率高

Dart 運(yùn)行時和編譯器支持 Flutter 的兩個關(guān)鍵特性的組合：

基于 JIT 的快速開發(fā)周期：Flutter 在開發(fā)階段采用，采用 JIT 模式，這樣就避免了每次改動都要進(jìn)行編譯，極大的節(jié)省了開發(fā)時間；

基于 AOT 的發(fā)布包: Flutter 在發(fā)布時可以通過 AOT 生成高效的 ARM 代碼以保證應(yīng)用性能。而 JavaScript 則不具有這個能力。

1. 高性能

Flutter 旨在提供流暢、高保真的的 UI 體驗(yàn)。為了實(shí)現(xiàn)這一點(diǎn)，F(xiàn)lutter 中需要能夠在每個動畫幀中運(yùn)行大量的代碼。這意味著需要一種既能提供高性能的語言，而不會出現(xiàn)會丟幀的周期性暫停，而 Dart 支持 AOT，在這一點(diǎn)上可以做的比 JavaScript 更好。

1. 快速內(nèi)存分配

Flutter 框架使用函數(shù)式流，這使得它在很大程度上依賴于底層的內(nèi)存分配器。因此，擁有一個能夠有效地處理瑣碎任務(wù)的內(nèi)存分配器將顯得十分重要，在缺乏此功能的語言中，F(xiàn)lutter 將無法有效地工作。當(dāng)然 Chrome V8 的 JavaScript 引擎在內(nèi)存分配上也已經(jīng)做的很好，事實(shí)上 Dart 開發(fā)團(tuán)隊(duì)的很多成員都是來自Chrome 團(tuán)隊(duì)的，所以在內(nèi)存分配上 Dart 并不能作為超越 JavaScript 的優(yōu)勢，而對于 Flutter 來說，它需要這樣的特性，而 Dart 也正好滿足而已。

1. 類型安全

由于 Dart 是類型安全的語言，支持靜態(tài)類型檢測，所以可以在編譯前發(fā)現(xiàn)一些類型的錯誤，并排除潛在問題，這一點(diǎn)對于前端開發(fā)者來說可能會更具有吸引力。與之不同的，JavaScript 是一個弱類型語言，也因此前端社區(qū)出現(xiàn)了很多給 JavaScript 代碼添加靜態(tài)類型檢測的擴(kuò)展語言和工具，如：微軟的 TypeScript 以及 Facebook 的 Flow。相比之下，Dart 本身就支持靜態(tài)類型，這是它的一個重要優(yōu)勢。

1. Dart團(tuán)隊(duì)就在你身邊

看似不起眼，實(shí)則舉足輕重。由于有 Dart 團(tuán)隊(duì)的積極投入，F(xiàn)lutter 團(tuán)隊(duì)可以獲得更多、更方便的支持，正如 Flutter 官網(wǎng)所述“我們正與 Dart 社區(qū)進(jìn)行密切合作，以改進(jìn) Dart 在 Flutter 中的使用。例如，當(dāng)我們最初采用 Dart 時，該語言并沒有提供生成原生二進(jìn)制文件的工具鏈（這對于實(shí)現(xiàn)可預(yù)測的高性能具有很大的幫助），但是現(xiàn)在它實(shí)現(xiàn)了，因?yàn)?Dart 團(tuán)隊(duì)專門為 Flutter 構(gòu)建了它。同樣，Dart VM 之前已經(jīng)針對吞吐量進(jìn)行了優(yōu)化，但團(tuán)隊(duì)現(xiàn)在正在優(yōu)化 VM 的延遲時間，這對于 Flutter 的工作負(fù)載更為重要?！?/p>

#總結(jié)

本節(jié)主要介紹了一下 Flutter 的特點(diǎn)，如果你感到有些點(diǎn)還不是很好理解，不用著急，隨著日后對 Flutter 細(xì)節(jié)的了解，再回過頭來看，相信你會有更深的體會。

#1.2.2 Flutter框架結(jié)構(gòu)

本節(jié)我們先對 Flutter 的框架做一個整體介紹，旨在讓讀者心中有一個整體的印象，這對初學(xué)者來說非常重要。如果一下子便深入到 Flutter 中，就會像是一個在沙漠中沒有地圖的人，即使可以找到一個綠洲，但是他也不會知道下一個綠洲在哪。因此，無論學(xué)什么技術(shù)，都要先有一張清晰的“地圖”，而我們的學(xué)習(xí)過程就是“按圖索驥”，這樣我們才不會陷于細(xì)節(jié)而“目無全?！?。言歸正傳，我們看一下 Flutter 官方提供的 Flutter 框架圖，如圖 1-1 所示：

#Flutter Framework

這是一個純 Dart 實(shí)現(xiàn)的 SDK，它實(shí)現(xiàn)了一套基礎(chǔ)庫，自底向上，我們來簡單介紹一下：

• 底下兩層（Foundation和Animation、Painting、Gestures）在 Google 的一些視頻中被合并為一個 dart UI 層，對應(yīng)的是 Flutter 中的dart:ui包，它是 Flutter 引擎暴露的底層UI庫，提供動畫、手勢及繪制能力。
• Rendering 層，這一層是一個抽象的布局層，它依賴于 dart UI 層，Rendering 層會構(gòu)建一個 UI 樹，當(dāng) UI 樹有變化時，會計(jì)算出有變化的部分，然后更新 UI 樹，最終將 UI 樹繪制到屏幕上，這個過程類似于 React 中的虛擬 DOM。Rendering 層可以說是 Flutter UI 框架最核心的部分，它除了確定每個 UI 元素的位置、大小之外還要進(jìn)行坐標(biāo)變換、繪制(調(diào)用底層 dart:ui)。
• Widgets 層是 Flutter 提供的的一套基礎(chǔ)組件庫，在基礎(chǔ)組件庫之上，F(xiàn)lutter 還提供了 Material 和 Cupertino 兩種視覺風(fēng)格的組件庫。而我們 Flutter 開發(fā)的大多數(shù)場景，只是和這兩層打交道。

#Flutter Engine

這是一個純 C++ 實(shí)現(xiàn)的 SDK，其中包括了 Skia 引擎、Dart 運(yùn)行時、文字排版引擎等。在代碼調(diào)用 dart:ui庫時，調(diào)用最終會走到 Engine 層，然后實(shí)現(xiàn)真正的繪制邏輯。

#總結(jié)

Flutter 框架本身有著良好的分層設(shè)計(jì)，本節(jié)旨在讓讀者對Flutter整體框架有個大概的印象，相信到現(xiàn)在為止，讀者已經(jīng)對 Flutter 有一個初始印象，在我們正式動手之前，我們還需要了解一下 Flutter 的開發(fā)語言 Dart。

#1.2.3 如何學(xué)習(xí)Flutter

本節(jié)給大家一些學(xué)習(xí)建議，分享一下筆者在學(xué)習(xí) Flutter 中的一些心得，希望可以幫助你提高學(xué)習(xí)效率，避免不必要的坑。

#資源

• 官網(wǎng)：閱讀 Flutter 官網(wǎng)的資源是快速入門的最佳方式，同時官網(wǎng)也是了解最新 Flutter 發(fā)展動態(tài)的地方，由于目前 Flutter 仍然處于快速發(fā)展階段，所以建議讀者還是時不時的去官網(wǎng)看看有沒有新的動態(tài)。
• 源碼及注釋：源碼注釋應(yīng)作為學(xué)習(xí) Flutter 的第一文檔，F(xiàn)lutter SDK 的源碼是開源的，并且注釋非常詳細(xì)，也有很多示例，實(shí)際上，F(xiàn)lutter 官方的 SDK 文檔就是通過注釋生成的。源碼結(jié)合注釋可以幫你解決大多數(shù)問題。
• Github：如果遇到的問題在 StackOverflow 上也沒有找到答案，可以去 github flutter 項(xiàng)目下提 issue。
• Gallery源碼：Gallery 是 Flutter 官方示例 APP，里面有豐富的示例，讀者可以在網(wǎng)上下載安裝。Gallery 的源碼在 Flutter 源碼“examples”目錄下。

#社區(qū)

• StackOverflow：如果你還沒聽過 StackOverflow，這是目前全球最大的程序員問答社區(qū)，現(xiàn)在也是活躍度最高的 Flutter 問答社區(qū)。StackOverflow 上面除了世界各地的 Flutter 使用者會在上面交流之外，F(xiàn)lutter 開發(fā)團(tuán)隊(duì)的成員也經(jīng)常會在上面回答問題。
• Flutter中文網(wǎng)社區(qū)：Flutter 中文網(wǎng)是筆者維護(hù)中文網(wǎng)站，目前也是最大的中文資源社區(qū)，上面提供了Flutter 官網(wǎng)的文檔翻譯、開源項(xiàng)目、及案例，還有申請加入組織的入口哦。
• 博客：隨著 Flutter 技術(shù)的推廣，相信很快網(wǎng)上將會有很多 Flutter 相關(guān)的文章、博客，讀者可以多去瀏覽、閱讀。

#總結(jié)

有了資料和社區(qū)后，對于我們學(xué)習(xí)者自身來說，最重要的還是要多動手、多實(shí)踐，在本書后面的章節(jié)中，希望讀者能夠親自動手寫一下示例。準(zhǔn)備好了嗎，下一章中，我們將正式進(jìn)入 Flutter 的世界！