一、Flutter是什么？

根據(jù)Flutter中文官網(wǎng)(英文官網(wǎng))的解釋?zhuān)篎lutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開(kāi)源的。使用的語(yǔ)言是Dart

tips:1.這段話直接摘抄自官網(wǎng)，這里我把英文和中文官網(wǎng)都放上了，有興趣的根據(jù)自己選擇進(jìn)行閱讀。因?yàn)橛袝r(shí)候翻譯過(guò)來(lái)的東西容易造成表意不明。

? ? ? ? 2.本來(lái)這里應(yīng)該提一下Google全新的操作系統(tǒng)Fuchsia的，因?yàn)镕uchsia 的官方應(yīng)用框架就是 Flutter + Dart?但是因?yàn)椴攀鑼W(xué)淺，了解并不多，所以這里不打算展開(kāi)講了。

特點(diǎn)：

1.快速開(kāi)發(fā)：Flutter的熱重載可以快速地進(jìn)行測(cè)試、構(gòu)建UI、添加功能并更快地修復(fù)錯(cuò)誤。

????????根據(jù)英文的寫(xiě)法應(yīng)該是叫做Hot Reload。就比如我們平時(shí)做安卓開(kāi)發(fā)有的地方本來(lái)只需要做一些簡(jiǎn)單的修改，你改完想看下效果，就得運(yùn)行項(xiàng)目在模擬器或者手機(jī)上面，有些大型的項(xiàng)目編譯起來(lái)就比較頭疼，雖然現(xiàn)在有一些組件化的思想來(lái)解決這個(gè)問(wèn)題，但是效果也不是盡善盡美。Flutter可以做過(guò)在亞毫秒級(jí)（官網(wǎng)是這么吹的）重新渲染界面，并且不會(huì)丟失狀態(tài)，而不是重新運(yùn)行整個(gè)項(xiàng)目（官網(wǎng)有演示）。

2.富有表現(xiàn)力，漂亮的用戶界面：自帶的Material Design和Cupertino（iOS風(fēng)格）widget、豐富的motion API、平滑而自然的滑動(dòng)效果。

????????Flutter的所有Widgets目錄。這里的Widgets就相當(dāng)于android里面的View。不過(guò)他們肯定是有區(qū)別的，Widget僅支持一幀，并且在每一幀上，F(xiàn)lutter的框架都會(huì)創(chuàng)建一個(gè)Widget實(shí)例樹(shù)(相當(dāng)于一次性繪制整個(gè)界面)。 相比之下，在Android上View繪制結(jié)束后，就不會(huì)重繪，直到調(diào)用invalidate時(shí)才會(huì)重繪。在Flutter里面萬(wàn)物皆Widget，界面是Widget，普通控件也是Widget。這些組件我大致看了一下，基本上很多都是可以跟android組件類(lèi)似或?qū)?yīng)的。

????????寫(xiě)過(guò)網(wǎng)頁(yè)的小伙伴們看到這個(gè)Row和Colume可能會(huì)有點(diǎn)熟悉，因?yàn)檫@個(gè)概念就是從web那邊搬過(guò)來(lái)的，而且Flutter的設(shè)計(jì)靈感也是從React那里來(lái)的。

3.響應(yīng)式框架：使用Flutter的現(xiàn)代、響應(yīng)式框架，和一系列基礎(chǔ)widget，輕松構(gòu)建您的用戶界面。

????????Flutter是采用響應(yīng)式的框架來(lái)構(gòu)建的，中心思想是用組件(widget)構(gòu)建你的UI。組件描述了在給定其當(dāng)前配置和狀態(tài)時(shí)他們顯示的樣子。但是這里要注意的一點(diǎn)是，不像Android里的view是可以直接修改的，F(xiàn)lutter的設(shè)計(jì)理念里widget是不可變的，不會(huì)直接更新，而必須使用Widget的狀態(tài)。

4.訪問(wèn)本地功能和SDK：Flutter可以復(fù)用現(xiàn)有的Java、Swift或ObjC代碼，訪問(wèn)iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK。

????????字面意思，所以不解釋。。。。。

5.統(tǒng)一的應(yīng)用開(kāi)發(fā)體驗(yàn)：Flutter擁有豐富的工具和庫(kù)，可以幫助開(kāi)發(fā)者輕松地同時(shí)在iOS和Android系統(tǒng)中實(shí)現(xiàn)想法和創(chuàng)意。

????????說(shuō)實(shí)話我不太相信。因?yàn)楝F(xiàn)在還是屬于預(yù)覽版階段，完善的社區(qū)和使用群體都沒(méi)有。我寫(xiě)這篇文章包括碰到問(wèn)題的時(shí)候，百度基本上是找不到答案的，Google出來(lái)的全是英文。也是自己生啃了幾篇英文的，才總結(jié)出來(lái)一些。

6.原生性能：Flutter包含了許多核心的widget，如滾動(dòng)、導(dǎo)航、圖標(biāo)和字體等，這些都可以在iOS和Android上達(dá)到原生應(yīng)用一樣的性能。

????????這一塊的話，自己還沒(méi)正式開(kāi)始寫(xiě)，也不好下定論，持觀望態(tài)度。

二、Flutter和ReactNative的區(qū)別

???????聽(tīng)我上面講了這么多，肯定有人要說(shuō)，兩三年前ReactNative也是這么吹的，但是現(xiàn)在已經(jīng)被拍死在沙灘上了。區(qū)別比較大的大一點(diǎn)就是ReactNative核心是通過(guò)Javascript開(kāi)發(fā)，執(zhí)行時(shí)需要Javascript解釋器，UI是通過(guò)原生控件渲染。

? ? ? 但是Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其它大多數(shù)框架不同，因?yàn)镕lutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。 相反，F(xiàn)lutter使用自己的高性能渲染引擎來(lái)繪制widget。Flutter使用C、C ++、Dart和Skia（2D渲染引擎）構(gòu)建。在IOS上，F(xiàn)lutter引擎的C/C ++代碼使用LLVM編譯，任何Dart代碼都是AOT編譯為本地代碼的，F(xiàn)lutter應(yīng)用程序使用本機(jī)指令集運(yùn)行（不涉及解釋器）。而在Android下，F(xiàn)lutter引擎的C/C ++代碼是用Android的NDK編譯的，任何Dart代碼都是AOT編譯成本地代碼的，F(xiàn)lutter應(yīng)用程序依然使用本機(jī)指令集運(yùn)行（不涉及解釋器）。因此，F(xiàn)lutter能達(dá)到原生應(yīng)用一樣的性能。

對(duì)比圖：左邊->ReactNative。????????????????????????右邊->Flutter。

三、Flutter的運(yùn)行環(huán)境配置

????? ??環(huán)境的配置請(qǐng)參照官網(wǎng)的這篇說(shuō)明Flutter環(huán)境配置，我也是照著這個(gè)配置。跟Androidsdk和jdk配置類(lèi)似。

四、AndroidStudio創(chuàng)建Flutter項(xiàng)目。

?走到這一步的前提是你已經(jīng)安裝好了FLutter和Dart的運(yùn)行環(huán)境，要不然就算你裝了下面這兩個(gè)插件也是沒(méi)用的，切記，切記。安裝兩個(gè)插件，一個(gè)叫Dart，一個(gè)叫Flutter。推薦用as3.0以上的版本，因?yàn)槲以?.x的版本失敗了。

????????這里直接搜Flutter點(diǎn)擊Install就可以了，他會(huì)提示你去安裝Dart，然后一直確定就可以了，安裝好之后重啟。在as左上角Flie->New這里就會(huì)出現(xiàn)這個(gè)東西

????????點(diǎn)一下創(chuàng)建Flutter項(xiàng)目，里面會(huì)讓你填Flutter SDK的路徑，這個(gè)路徑一定要弄對(duì)，就是Flutter的文件夾全路徑。項(xiàng)目名，項(xiàng)目路徑什么的就隨你喜歡了。創(chuàng)建成功之后里面是這樣子的

????????如果熟悉ReactNative的朋友對(duì)這些目錄并不會(huì)陌生，因?yàn)镕lutter和那個(gè)類(lèi)似，這里大概分四個(gè)文件夾，android就是表示安卓程序的入口，跟我們平時(shí)創(chuàng)建的安卓項(xiàng)目很像，不過(guò)他這里的MainActivity繼承的是FlutterActivity。ios當(dāng)然就是ios程序入口，lib就是主要代碼邏輯所在的地方，安卓和ios都是用這里的同一套的代碼的，可以看到文件結(jié)尾是.dart。test就是測(cè)試的。

? ? ? ?接下來(lái)我們打開(kāi)main.dart文件，就像我們創(chuàng)建一個(gè)安卓項(xiàng)目一樣，里面肯定不是空的，是有一些自帶的dart代碼的。

這一段就是上面提到過(guò)的Dart語(yǔ)言了，可以看到其實(shí)不是特別美觀。這個(gè)main.dart把我嚇到了，我什么都還沒(méi)寫(xiě)，直接一打開(kāi)算上注釋接近150行。這里我去掉了一些多余的注釋?zhuān)粝铝艘恍┖?jiǎn)單的，應(yīng)該看注釋就大概能知道每一部分是干啥的了。說(shuō)實(shí)話有些部分我暫時(shí)也不清楚是干啥的，不過(guò)先不管了，運(yùn)行一下再說(shuō)。

根據(jù)這個(gè)運(yùn)行后的圖片再去看上面的一個(gè)個(gè)class就大概可以看得懂了：

????????1、void main() => runApp(new MyApp());指定程序的入口，在這里就是MyApp，這個(gè)比較像ReactNative里面ES6的寫(xiě)法。

????????2、第一個(gè)class MyApp就是指定圖片上最上面那個(gè)“Flutter Demo Home Page”的主題，顏色，字體的。在這里他是無(wú)狀態(tài)的（StatelessWidget)。

????????3、第二個(gè)class MyHomePage創(chuàng)建了一個(gè)有狀態(tài)的Widget（StatefulWidget），并通過(guò)這段代碼_MyHomePageState createState() => new _MyHomePageState();去指定管理他狀態(tài)的類(lèi)，也就是第三個(gè)class，可以看到他們的名字是對(duì)應(yīng)的。

????????4、第三個(gè)class _MyHomePageState()就是改變狀態(tài)的代碼，也就是渲染界面的實(shí)際代碼，因?yàn)樯厦嫖覀冋f(shuō)了Widget是通過(guò)改變狀態(tài)來(lái)控制的。里面的build就是主入口了，可以看到里面有appBar,body,floatingActionButton之類(lèi)的，每一個(gè)后面跟著他們的的文本大小啊，文本內(nèi)容。排列方式什么的。就相當(dāng)于我們?cè)诎沧块_(kāi)發(fā)中xml文件里面的內(nèi)容，F(xiàn)lutter都是寫(xiě)在代碼上面的。

tip:解釋一下這個(gè)有狀態(tài)和無(wú)狀態(tài)的意思：

????????StatelessWidget，這個(gè)的特點(diǎn)是靜態(tài)，頁(yè)面中的數(shù)據(jù)一旦渲染后，就不能在更改，一般用于顯示靜態(tài)頁(yè)面。

????????StatefulWidget，則是可以改變狀態(tài)的Widget，頁(yè)面的顯示隨著狀態(tài)改變而改變。通過(guò)setState方法可以非常方便的修改頁(yè)面狀態(tài)，與現(xiàn)在web動(dòng)態(tài)綁定框架是類(lèi)似的。

五、總結(jié)

暫時(shí)先告一段落了，自己也是這兩天才開(kāi)始正式了解這個(gè)東西。先是打算從一個(gè)大致的結(jié)構(gòu)先去理解這個(gè)東西是啥。然后再?gòu)恼Z(yǔ)法和組件去學(xué)習(xí)。接下來(lái)打算學(xué)習(xí)一些有關(guān)Dart語(yǔ)言的內(nèi)容，F(xiàn)lutter被詬病最多也是這個(gè)問(wèn)題，為什么要采用可讀性這么差的Dart的語(yǔ)言，說(shuō)實(shí)話，我也覺(jué)得Dart語(yǔ)言比較難看。。。。。但是另一個(gè)我認(rèn)為更困難的地方就是現(xiàn)在能找到的教程和文章大多數(shù)都是英文的，我也是翻譯了一部分，如果覺(jué)得我說(shuō)的不好。我在參考里面會(huì)貼上一些我找到的英文文章?？梢宰孕袨g覽。不過(guò)強(qiáng)烈推薦的還是我上面給出的Flutter中文網(wǎng)，真的非常非常詳細(xì)。

參考教程：

awesome-flutter（這里我找到的翻譯過(guò)后的版本，不過(guò)很可惜里面的資料是全英文，有些還需要科學(xué)上網(wǎng)，我文章一部分就是從這里翻譯過(guò)來(lái)的）

flutter的Github地址（Flutter的源碼地址）

Dart語(yǔ)言教程（一篇相對(duì)來(lái)說(shuō)比較好的Dart教程）

Flutter for Android（寫(xiě)給android開(kāi)發(fā)者看的Flutter教程，寫(xiě)的非常好！）

Flutter專(zhuān)欄（CSDN上的Flutter專(zhuān)欄，建議從最后一頁(yè)開(kāi)始閱讀）

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18404.html