Flutter簡介
Flutter 是 Google推出并開源的移動應用開發(fā)框架，主打跨平臺、高保真、高性能。開發(fā)者可以通過 Dart語言開發(fā) App，一套代碼同時運行在 iOS 和 Android平臺。 Flutter提供了豐富的組件、接口，開發(fā)者可以很快地為 Flutter添加 native擴展。同時 Flutter還使用 Native引擎渲染視圖，這無疑能為用戶提供良好的體驗。
跨平臺自繪引擎
Flutter與用于構(gòu)建移動應用程序的其它大多數(shù)框架不同，因為Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。 相反，Flutter使用自己的高性能渲染引擎來繪制widget。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對原生控件依賴而帶來的限制及高昂的維護成本。
Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函數(shù)庫，包含字型、坐標轉(zhuǎn)換，以及點陣圖都有高效能且簡潔的表現(xiàn)，Skia是跨平臺的，并提供了非常友好的API，目前Google Chrome瀏覽器和Android均采用Skia作為其繪圖引擎。
目前Flutter默認支持iOS、Android、Fuchsia（Google新的自研操作系統(tǒng)）三個移動平臺。但Flutter亦可支持Web開發(fā)（Flutter for web）和PC開發(fā)，本書的示例和介紹主要是基于iOS和Android平臺的，其它平臺讀者可以自行了解。
高性能
Flutter高性能主要靠兩點來保證，首先，Flutter APP采用Dart語言開發(fā)。Dart在 JIT（即時編譯）模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當以 AOT模式運行時，JavaScript便遠遠追不上了。速度的提升對高幀率下的視圖數(shù)據(jù)計算很有幫助。其次，F(xiàn)lutter使用自己的渲染引擎來繪制UI，布局數(shù)據(jù)等由Dart語言直接控制，所以在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，這在一些滑動和拖動的場景下具有明顯優(yōu)勢，因為在滑動和拖動過程往往都會引起布局發(fā)生變化，所以JavaScript需要和Native之間不停的同步布局信息，這和在瀏覽器中要JavaScript頻繁操作DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。
采用Dart語言開發(fā)
這是一個很有意思，但也很有爭議的問題，在了解Flutter為什么選擇了 Dart而不是 JavaScript之前我們先來介紹兩個概念：JIT和AOT。
目前，程序主要有兩種運行方式：靜態(tài)編譯與動態(tài)解釋。靜態(tài)編譯的程序在執(zhí)行前全部被翻譯為機器碼，通常將這種類型稱為AOT （Ahead of time）即 “提前編譯”；而解釋執(zhí)行的則是一句一句邊翻譯邊運行，通常將這種類型稱為JIT（Just-in-time）即“即時編譯”。AOT程序的典型代表是用C/C++開發(fā)的應用，它們必須在執(zhí)行前編譯成機器碼，而JIT的代表則非常多，如JavaScript、python等，事實上，所有腳本語言都支持JIT模式。但需要注意的是JIT和AOT指的是程序運行方式，和編程語言并非強關(guān)聯(lián)的，有些語言既可以以JIT方式運行也可以以AOT方式運行，如Java、Python，它們可以在第一次執(zhí)行時編譯成中間字節(jié)碼、然后在之后執(zhí)行時可以直接執(zhí)行字節(jié)碼，也許有人會說，中間字節(jié)碼并非機器碼，在程序執(zhí)行時仍然需要動態(tài)將字節(jié)碼轉(zhuǎn)為機器碼，是的，這沒有錯，不過通常我們區(qū)分是否為AOT的標準就是看代碼在執(zhí)行之前是否需要編譯，只要需要編譯，無論其編譯產(chǎn)物是字節(jié)碼還是機器碼，都屬于AOT。在此，讀者不必糾結(jié)于概念，概念就是為了傳達精神而發(fā)明的，只要讀者能夠理解其原理即可，得其神忘其形。
現(xiàn)在我們看看Flutter為什么選擇Dart語言？筆者根據(jù)官方解釋以及自己對Flutter的理解總結(jié)了以下幾條（由于其它跨平臺框架都將JavaScript作為其開發(fā)語言，所以主要將Dart和JavaScript做一個對比）：
-
開發(fā)效率高
Dart運行時和編譯器支持Flutter的兩個關(guān)鍵特性的組合：
基于JIT的快速開發(fā)周期：Flutter在開發(fā)階段采用，采用JIT模式，這樣就避免了每次改動都要進行編譯，極大的節(jié)省了開發(fā)時間；
基于AOT的發(fā)布包: Flutter在發(fā)布時可以通過AOT生成高效的ARM代碼以保證應用性能。而JavaScript則不具有這個能力。
-
高性能
Flutter旨在提供流暢、高保真的的UI體驗。為了實現(xiàn)這一點，F(xiàn)lutter中需要能夠在每個動畫幀中運行大量的代碼。這意味著需要一種既能提供高性能的語言，而不會出現(xiàn)會丟幀的周期性暫停，而Dart支持AOT，在這一點上可以做的比JavaScript更好。
-
快速內(nèi)存分配
Flutter框架使用函數(shù)式流，這使得它在很大程度上依賴于底層的內(nèi)存分配器。因此，擁有一個能夠有效地處理瑣碎任務的內(nèi)存分配器將顯得十分重要，在缺乏此功能的語言中，F(xiàn)lutter將無法有效地工作。當然Chrome V8的JavaScript引擎在內(nèi)存分配上也已經(jīng)做的很好，事實上Dart開發(fā)團隊的很多成員都是來自Chrome團隊的，所以在內(nèi)存分配上Dart并不能作為超越JavaScript的優(yōu)勢，而對于Flutter來說，它需要這樣的特性，而Dart也正好滿足而已。
-
類型安全
由于Dart是類型安全的語言，支持靜態(tài)類型檢測，所以可以在編譯前發(fā)現(xiàn)一些類型的錯誤，并排除潛在問題，這一點對于前端開發(fā)者來說可能會更具有吸引力。與之不同的，JavaScript是一個弱類型語言，也因此前端社區(qū)出現(xiàn)了很多給JavaScript代碼添加靜態(tài)類型檢測的擴展語言和工具，如：微軟的TypeScript以及Facebook的Flow。相比之下，Dart本身就支持靜態(tài)類型，這是它的一個重要優(yōu)勢。
-
Dart團隊就在你身邊
看似不起眼，實則舉足輕重。由于有Dart團隊的積極投入，F(xiàn)lutter團隊可以獲得更多、更方便的支持，正如Flutter官網(wǎng)所述“我們正與Dart社區(qū)進行密切合作，以改進Dart在Flutter中的使用。例如，當我們最初采用Dart時，該語言并沒有提供生成原生二進制文件的工具鏈（這對于實現(xiàn)可預測的高性能具有很大的幫助），但是現(xiàn)在它實現(xiàn)了，因為Dart團隊專門為Flutter構(gòu)建了它。同樣，Dart VM之前已經(jīng)針對吞吐量進行了優(yōu)化，但團隊現(xiàn)在正在優(yōu)化VM的延遲時間，這對于Flutter的工作負載更為重要?！?/p>
總結(jié)
本節(jié)主要介紹了一下Flutter的特點，如果你感到有些點還不是很好理解，不用著急，隨著日后對Flutter細節(jié)的了解，再回過頭來看，相信你會有更深的體會。
Flutter框架結(jié)構(gòu)
本節(jié)我們先對Flutter的框架做一個整體介紹，旨在讓讀者心中有一個整體的印象，這對初學者來說非常重要。如果一下子便深入到Flutter中，就會像是一個在沙漠中沒有地圖的人，即使可以找到一個綠洲，但是他也不會知道下一個綠洲在哪。因此，無論學什么技術(shù)，都要現(xiàn)有一張清晰的“地圖”，而我們的學習過程就是“按圖索驥”，這樣我們才不會陷于細節(jié)而“目無全牛”。言歸正傳，我們看一下Flutter官方提供的Flutter框架圖，如圖1-1所示：
Flutter Framework
這是一個純 Dart實現(xiàn)的 SDK，它實現(xiàn)了一套基礎(chǔ)庫，自底向上，我們來簡單介紹一下：
底下兩層（Foundation和Animation、Painting、Gestures）在Google的一些視頻中被合并為一個dart UI層，對應的是Flutter中的
dart:ui包，它是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪制能力。Rendering層，這一層是一個抽象的布局層，它依賴于dart UI層，Rendering層會構(gòu)建一個UI樹，當UI樹有變化時，會計算出有變化的部分，然后更新UI樹，最終將UI樹繪制到屏幕上，這個過程類似于React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分，它除了確定每個UI元素的位置、大小之外還要進行坐標變換、繪制(調(diào)用底層dart:ui)。
Widgets層是Flutter提供的的一套基礎(chǔ)組件庫，在基礎(chǔ)組件庫之上，F(xiàn)lutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。而我們Flutter開發(fā)的大多數(shù)場景，只是和這兩層打交道。
Flutter Engine
這是一個純 C++實現(xiàn)的 SDK，其中包括了 Skia引擎、Dart運行時、文字排版引擎等。在代碼調(diào)用 dart:ui庫時，調(diào)用最終會走到Engine層，然后實現(xiàn)真正的繪制邏輯。
總結(jié)
Flutter框架本身有著良好的分層設計，本節(jié)旨在讓讀者對Flutter整體框架有個大概的印象，相信到現(xiàn)在為止，讀者已經(jīng)對Flutter有一個初始印象，在我們正式動手之前，我們還需要了解一下Flutter的開發(fā)語言Dart。
如何學習Flutter
本節(jié)給大家一些學習建議，分享一下筆者在學習Flutter中的一些心得，希望可以幫助你提高學習效率，避免不必要的坑。
資源
官網(wǎng)：閱讀Flutter官網(wǎng)的資源是快速入門的最佳方式，同時官網(wǎng)也是了解最新Flutter發(fā)展動態(tài)的地方，由于目前Flutter仍然處于快速發(fā)展階段，所以建議讀者還是時不時的去官網(wǎng)看看有沒有新的動態(tài)。
源碼及注釋：源碼注釋應作為學習Flutter的第一文檔，F(xiàn)lutter SDK的源碼是開源的，并且注釋非常詳細，也有很多示例，實際上，F(xiàn)lutter官方的SDK文檔就是通過注釋生成的。源碼結(jié)合注釋可以幫你解決大多數(shù)問題。
Github：如果遇到的問題在StackOverflow上也沒有找到答案，可以去github flutter 項目下提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ā)團隊的成員也經(jīng)常會在上面回答問題。
- Flutter中文網(wǎng)社區(qū)：Flutter中文網(wǎng)是筆者維護中文網(wǎng)站，目前也是最大的中文資源社區(qū)，上面提供了Flutter官網(wǎng)的文檔翻譯、開源項目、及案例，還有申請加入組織的入口哦。
- 博客：隨著Flutter技術(shù)的推廣，相信很快網(wǎng)上將會有很多Flutter相關(guān)的文章、博客，讀者可以多去瀏覽、閱讀。
總結(jié)
有了資料和社區(qū)后，對于我們學習者自身來說，最重要的還是要多動手、多實踐，在本書后面的章節(jié)中，希望讀者能夠親自動手寫一下示例。準備好了嗎，下一章中，我們將正式進入Flutter的世界！
參考鏈接https://book.flutterchina.club/
