[TOC]
Flutter簡(jiǎn)介
Flutter 是 Google推出并開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架化借，主打跨平臺(tái)、高保真、高性能蒜焊。開(kāi)發(fā)者可以通過(guò) Dart語(yǔ)言開(kāi)發(fā) App科贬，一套代碼同時(shí)運(yùn)行在 iOS 和 Android平臺(tái)。 Flutter提供了豐富的組件优妙、接口套硼，開(kāi)發(fā)者可以很快地為 Flutter添加 native擴(kuò)展胞皱。同時(shí) Flutter還使用 Native引擎渲染視圖九妈，這無(wú)疑能為用戶提供良好的體驗(yàn)萌朱。
跨平臺(tái)自繪引擎
Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其它大多數(shù)框架不同策菜，因?yàn)镕lutter既不使用WebView，也不使用操作系統(tǒng)的原生控件翠霍。 相反壶运，F(xiàn)lutter使用自己的高性能渲染引擎來(lái)繪制widget浪秘。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對(duì)原生控件依賴而帶來(lái)的限制及高昂的維護(hù)成本棵癣。
Flutter使用Skia作為其2D渲染引擎狈谊，Skia是Google的一個(gè)2D圖形處理函數(shù)庫(kù)沟沙，包含字型、坐標(biāo)轉(zhuǎn)換赎瞎，以及點(diǎn)陣圖都有高效能且簡(jiǎn)潔的表現(xiàn)颊咬，Skia是跨平臺(tái)的喳篇，并提供了非常友好的API，目前Google Chrome瀏覽器和Android均采用Skia作為其繪圖引擎挺尿。
目前Flutter默認(rèn)支持iOS、Android攀涵、Fuchsia（Google新的自研操作系統(tǒng)）三個(gè)移動(dòng)平臺(tái)以故。但Flutter亦可支持Web開(kāi)發(fā)（Flutter for web）和PC開(kāi)發(fā)裆操，本書(shū)的示例和介紹主要是基于iOS和Android平臺(tái)的，其它平臺(tái)讀者可以自行了解昆烁。
高性能
Flutter高性能主要靠?jī)牲c(diǎn)來(lái)保證静尼，首先传泊，Flutter APP采用Dart語(yǔ)言開(kāi)發(fā)。
Dart在 JIT（即時(shí)編譯）模式下拦盹，速度與 JavaScript基本持平溪椎。但是 Dart支持 AOT校读，當(dāng)以 AOT模式運(yùn)行時(shí)，JavaScript便遠(yuǎn)遠(yuǎn)追不上了华临。速度的提升對(duì)高幀率下的視圖數(shù)據(jù)計(jì)算很有幫助端考。
其次却特，Flutter使用自己的渲染引擎來(lái)繪制UI裂明，布局?jǐn)?shù)據(jù)等由Dart語(yǔ)言直接控制太援，所以在布局過(guò)程中不需要像RN那樣要在JavaScript和Native之間通信扳碍，這在一些滑動(dòng)和拖動(dòng)的場(chǎng)景下具有明顯優(yōu)勢(shì)笋敞，因?yàn)樵诨瑒?dòng)和拖動(dòng)過(guò)程往往都會(huì)引起布局發(fā)生變化夯巷，所以JavaScript需要和Native之間不停的同步布局信息哀墓，這和在瀏覽器中要JavaScript頻繁操作DOM所帶來(lái)的問(wèn)題是相同的，都會(huì)帶來(lái)比較可觀的性能開(kāi)銷后雷。
采用Dart語(yǔ)言開(kāi)發(fā)
這是一個(gè)很有意思臀突，但也很有爭(zhēng)議的問(wèn)題走孽，在了解Flutter為什么選擇了 Dart而不是 JavaScript之前我們先來(lái)介紹兩個(gè)概念：JIT和AOT。
目前盒齿，程序主要有兩種運(yùn)行方式：靜態(tài)編譯與動(dòng)態(tài)解釋困食。靜態(tài)編譯的程序在執(zhí)行前全部被翻譯為機(jī)器碼硕盹，通常將這種類型稱為AOT （Ahead of time）即 “提前編譯”；而解釋執(zhí)行的則是一句一句邊翻譯邊運(yùn)行啊胶，通常將這種類型稱為JIT（Just-in-time）即“即時(shí)編譯”焰坪。AOT程序的典型代表是用C/C++開(kāi)發(fā)的應(yīng)用聘惦，它們必須在執(zhí)行前編譯成機(jī)器碼，而JIT的代表則非常多黔漂，如JavaScript、python等牧嫉，事實(shí)上驹止，所有腳本語(yǔ)言都支持JIT模式观蜗。但需要注意的是JIT和AOT指的是程序運(yùn)行方式，和編程語(yǔ)言并非強(qiáng)關(guān)聯(lián)的抖仅，有些語(yǔ)言既可以以JIT方式運(yùn)行也可以以AOT方式運(yùn)行撤卢，如Java梧兼、Python，它們可以在第一次執(zhí)行時(shí)編譯成中間字節(jié)碼渡紫、然后在之后執(zhí)行時(shí)可以直接執(zhí)行字節(jié)碼考赛，也許有人會(huì)說(shuō)颜骤，中間字節(jié)碼并非機(jī)器碼，在程序執(zhí)行時(shí)仍然需要?jiǎng)討B(tài)將字節(jié)碼轉(zhuǎn)為機(jī)器碼八孝，是的鸠项，這沒(méi)有錯(cuò)，不過(guò)通常我們區(qū)分是否為AOT的標(biāo)準(zhǔn)就是看代碼在執(zhí)行之前是否需要編譯，只要需要編譯，無(wú)論其編譯產(chǎn)物是字節(jié)碼還是機(jī)器碼浅辙，都屬于AOT阎姥。在此呼巴，讀者不必糾結(jié)于概念，概念就是為了傳達(dá)精神而發(fā)明的诊赊，只要讀者能夠理解其原理即可府瞄，得其神忘其形。
現(xiàn)在我們看看Flutter為什么選擇Dart語(yǔ)言鲸郊？筆者根據(jù)官方解釋以及自己對(duì)Flutter的理解總結(jié)了以下幾條（由于其它跨平臺(tái)框架都將JavaScript作為其開(kāi)發(fā)語(yǔ)言秆撮，所以主要將Dart和JavaScript做一個(gè)對(duì)比）：
-
開(kāi)發(fā)效率高
Dart運(yùn)行時(shí)和編譯器支持Flutter的兩個(gè)關(guān)鍵特性的組合：
基于JIT的快速開(kāi)發(fā)周期：Flutter在開(kāi)發(fā)階段采用换况，采用JIT模式，這樣就避免了每次改動(dòng)都要進(jìn)行編譯拨匆，極大的節(jié)省了開(kāi)發(fā)時(shí)間惭每；
基于AOT的發(fā)布包: Flutter在發(fā)布時(shí)可以通過(guò)AOT生成高效的ARM代碼以保證應(yīng)用性能亏栈。而JavaScript則不具有這個(gè)能力。 -
高性能
Flutter旨在提供流暢黎侈、高保真的的UI體驗(yàn)峻汉。為了實(shí)現(xiàn)這一點(diǎn)，F(xiàn)lutter中需要能夠在每個(gè)動(dòng)畫(huà)幀中運(yùn)行大量的代碼休吠。這意味著需要一種既能提供高性能的語(yǔ)言，而不會(huì)出現(xiàn)會(huì)丟幀的周期性暫停阳懂，而Dart支持AOT岩调，在這一點(diǎn)上可以做的比JavaScript更好赡盘。
-
快速內(nèi)存分配
Flutter框架使用函數(shù)式流，這使得它在很大程度上依賴于底層的內(nèi)存分配器堕澄。因此蛙紫，擁有一個(gè)能夠有效地處理瑣碎任務(wù)的內(nèi)存分配器將顯得十分重要途戒，在缺乏此功能的語(yǔ)言中，F(xiàn)lutter將無(wú)法有效地工作唁毒。當(dāng)然Chrome V8的JavaScript引擎在內(nèi)存分配上也已經(jīng)做的很好星爪，事實(shí)上Dart開(kāi)發(fā)團(tuán)隊(duì)的很多成員都是來(lái)自Chrome團(tuán)隊(duì)的，所以在內(nèi)存分配上Dart并不能作為超越JavaScript的優(yōu)勢(shì)近零，而對(duì)于Flutter來(lái)說(shuō)久信，它需要這樣的特性漓摩，而Dart也正好滿足而已。
-
類型安全
由于Dart是類型安全的語(yǔ)言腿椎，支持靜態(tài)類型檢測(cè)，所以可以在編譯前發(fā)現(xiàn)一些類型的錯(cuò)誤鞍泉，并排除潛在問(wèn)題肮帐，這一點(diǎn)對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)可能會(huì)更具有吸引力训枢。與之不同的忘巧，JavaScript是一個(gè)弱類型語(yǔ)言砚嘴，也因此前端社區(qū)出現(xiàn)了很多給JavaScript代碼添加靜態(tài)類型檢測(cè)的擴(kuò)展語(yǔ)言和工具，如：微軟的TypeScript以及Facebook的Flow耸采。相比之下工育，Dart本身就支持靜態(tài)類型，這是它的一個(gè)重要優(yōu)勢(shì)嘱朽。
-
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時(shí)仔役，該語(yǔ)言并沒(méi)有提供生成原生二進(jìn)制文件的工具鏈（這對(duì)于實(shí)現(xiàn)可預(yù)測(cè)的高性能具有很大的幫助），但是現(xiàn)在它實(shí)現(xiàn)了任柜，因?yàn)镈art團(tuán)隊(duì)專門(mén)為Flutter構(gòu)建了它沛厨。同樣，Dart VM之前已經(jīng)針對(duì)吞吐量進(jìn)行了優(yōu)化宅粥，但團(tuán)隊(duì)現(xiàn)在正在優(yōu)化VM的延遲時(shí)間电谣，這對(duì)于Flutter的工作負(fù)載更為重要∑罂眩”
總結(jié)
本節(jié)主要介紹了一下Flutter的特點(diǎn)牢贸，如果你感到有些點(diǎn)還不是很好理解，不用著急臭增，隨著日后對(duì)Flutter細(xì)節(jié)的了解誊抛，再回過(guò)頭來(lái)看，相信你會(huì)有更深的體會(huì)拗窃。
Flutter框架結(jié)構(gòu)
本節(jié)我們先對(duì)Flutter的框架做一個(gè)整體介紹随夸，旨在讓讀者心中有一個(gè)整體的印象震放，這對(duì)初學(xué)者來(lái)說(shuō)非常重要。如果一下子便深入到Flutter中诈铛，就會(huì)像是一個(gè)在沙漠中沒(méi)有地圖的人，即使可以找到一個(gè)綠洲幢竹，但是他也不會(huì)知道下一個(gè)綠洲在哪。因此蹲坷，無(wú)論學(xué)什么技術(shù)冠句，都要先有一張清晰的“地圖”，而我們的學(xué)習(xí)過(guò)程就是“按圖索驥”，這樣我們才不會(huì)陷于細(xì)節(jié)而“目無(wú)全藕痹”丐重。言歸正傳，我們看一下Flutter官方提供的Flutter框架圖臀蛛，如圖1-1所示：
[圖片上傳失敗...(image-a6f029-1608880939761)]
Flutter Framework
這是一個(gè)純 Dart實(shí)現(xiàn)的 SDK崖蜜，它實(shí)現(xiàn)了一套基礎(chǔ)庫(kù)豫领，自底向上，我們來(lái)簡(jiǎn)單介紹一下：
- 底下兩層（Foundation和Animation洲劣、Painting课蔬、Gestures）在Google的一些視頻中被合并為一個(gè)dart UI層，對(duì)應(yīng)的是Flutter中的dart:ui包战惊，它是Flutter引擎暴露的底層UI庫(kù)同欠，提供動(dòng)畫(huà)、手勢(shì)及繪制能力衫哥。
- Rendering層，這一層是一個(gè)抽象的布局層膛锭，它依賴于dart UI層蚊荣，Rendering層會(huì)構(gòu)建一個(gè)UI樹(shù)，當(dāng)UI樹(shù)有變化時(shí)奢入，會(huì)計(jì)算出有變化的部分，然后更新UI樹(shù)腥光，最終將UI樹(shù)繪制到屏幕上武福，這個(gè)過(guò)程類似于React中的虛擬DOM痘番。Rendering層可以說(shuō)是Flutter UI框架最核心的部分，它除了確定每個(gè)UI元素的位置伍纫、大小之外還要進(jìn)行坐標(biāo)變換翻斟、繪制(調(diào)用底層dart:ui)。
- Widgets層是Flutter提供的的一套基礎(chǔ)組件庫(kù)访惜，在基礎(chǔ)組件庫(kù)之上债热，F(xiàn)lutter還提供了 Material 和Cupertino兩種視覺(jué)風(fēng)格的組件庫(kù)窒篱。而我們Flutter開(kāi)發(fā)的大多數(shù)場(chǎng)景，只是和這兩層打交道墙杯。
Flutter Engine
這是一個(gè)純 C++實(shí)現(xiàn)的 SDK高镐，其中包括了 Skia引擎嫉髓、Dart運(yùn)行時(shí)、文字排版引擎等梧油。在代碼調(diào)用 dart:ui庫(kù)時(shí)州邢，調(diào)用最終會(huì)走到Engine層量淌，然后實(shí)現(xiàn)真正的繪制邏輯。
總結(jié)
Flutter框架本身有著良好的分層設(shè)計(jì)，本節(jié)旨在讓讀者對(duì)Flutter整體框架有個(gè)大概的印象渔扎，相信到現(xiàn)在為止晃痴，讀者已經(jīng)對(duì)Flutter有一個(gè)初始印象，在我們正式動(dòng)手之前倘核，我們還需要了解一下Flutter的開(kāi)發(fā)語(yǔ)言Dart紧唱。
如何學(xué)習(xí)Flutter
本節(jié)給大家一些學(xué)習(xí)建議漏益，分享一下筆者在學(xué)習(xí)Flutter中的一些心得，希望可以幫助你提高學(xué)習(xí)效率绰疤，避免不必要的坑。
資源
- 官網(wǎng)：閱讀Flutter官網(wǎng)的資源是快速入門(mén)的最佳方式敛劝，同時(shí)官網(wǎng)也是了解最新Flutter發(fā)展動(dòng)態(tài)的地方夸盟，由于目前Flutter仍然處于快速發(fā)展階段呐粘，所以建議讀者還是時(shí)不時(shí)的去官網(wǎng)看看有沒(méi)有新的動(dòng)態(tài)。
- 源碼及注釋：源碼注釋?xiě)?yīng)作為學(xué)習(xí)Flutter的第一文檔唆垃，F(xiàn)lutter SDK的源碼是開(kāi)源的痘儡，并且注釋非常詳細(xì)沉删，也有很多示例，實(shí)際上砖茸，F(xiàn)lutter官方的SDK文檔就是通過(guò)注釋生成的凉夯。源碼結(jié)合注釋可以幫你解決大多數(shù)問(wèn)題采幌。
- Github：如果遇到的問(wèn)題在StackOverflow上也沒(méi)有找到答案休傍，可以去github flutter 項(xiàng)目下提issue磨取。
- Gallery源碼：Gallery是Flutter官方示例APP忙厌，里面有豐富的示例，讀者可以在網(wǎng)上下載安裝隘截。Gallery的源碼在Flutter源碼“examples”目錄下。
社區(qū)
- StackOverflow：如果你還沒(méi)聽(tīng)過(guò)StackOverflow东臀，這是目前全球最大的程序員問(wèn)答社區(qū)惰赋，現(xiàn)在也是活躍度最高的Flutter問(wèn)答社區(qū)。StackOverflow上面除了世界各地的Flutter使用者會(huì)在上面交流之外呵哨，F(xiàn)lutter開(kāi)發(fā)團(tuán)隊(duì)的成員也經(jīng)常會(huì)在上面回答問(wèn)題赁濒。
- Flutter中文網(wǎng)社區(qū)：Flutter中文網(wǎng)是筆者維護(hù)中文網(wǎng)站，目前也是最大的中文資源社區(qū)孟害，上面提供了Flutter官網(wǎng)的文檔翻譯拒炎、開(kāi)源項(xiàng)目、及案例挨务，還有申請(qǐng)加入組織的入口哦击你。
-
博客：隨著Flutter技術(shù)的推廣，相信很快網(wǎng)上將會(huì)有很多Flutter相關(guān)的文章谎柄、博客丁侄，讀者可以多去瀏覽、閱讀朝巫。總結(jié)
有了資料和社區(qū)后，對(duì)于我們學(xué)習(xí)者自身來(lái)說(shuō)，最重要的還是要多動(dòng)手变逃、多實(shí)踐，在本書(shū)后面的章節(jié)中凰棉，希望讀者能夠親自動(dòng)手寫(xiě)一下示例撒犀。準(zhǔn)備好了嗎，下一章中胆筒，我們將正式進(jìn)入Flutter的世界！
轉(zhuǎn)載自：https://book.flutterchina.club/chapter1/flutter_intro.html
