一、Flutter是什么？

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

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

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

特點(diǎn)：

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

????????根據(jù)英文的寫法應(yīng)該是叫做Hot Reload。就比如我們平時(shí)做安卓開發(fā)有的地方本來只需要做一些簡(jiǎn)單的修改，你改完想看下效果，就得運(yùn)行項(xiàng)目在模擬器或者手機(jī)上面，有些大型的項(xiàng)目編譯起來就比較頭疼，雖然現(xiàn)在有一些組件化的思想來解決這個(gè)問題，但是效果也不是盡善盡美。Flutter可以做過在亞毫秒級(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。不過他們肯定是有區(qū)別的，Widget僅支持一幀，并且在每一幀上，F(xiàn)lutter的框架都會(huì)創(chuàng)建一個(gè)Widget實(shí)例樹(相當(dāng)于一次性繪制整個(gè)界面)。 相比之下，在Android上View繪制結(jié)束后，就不會(huì)重繪，直到調(diào)用invalidate時(shí)才會(huì)重繪。在Flutter里面萬物皆Widget，界面是Widget，普通控件也是Widget。這些組件我大致看了一下，基本上很多都是可以跟android組件類似或?qū)?yīng)的。

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

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

????????Flutter是采用響應(yīng)式的框架來構(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.訪問本地功能和SDK：Flutter可以復(fù)用現(xiàn)有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK。

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

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

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

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

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

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

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

? ? ? 但是Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其它大多數(shù)框架不同，因?yàn)镕lutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。 相反，F(xiàn)lutter使用自己的高性能渲染引擎來繪制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)的這篇說明Flutter環(huán)境配置，我也是照著這個(gè)配置。跟Androidsdk和jdk配置類似。

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

?走到這一步的前提是你已經(jīng)安裝好了FLutter和Dart的運(yùn)行環(huán)境，要不然就算你裝了下面這兩個(gè)插件也是沒用的，切記，切記。安裝兩個(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è)類似，這里大概分四個(gè)文件夾，android就是表示安卓程序的入口，跟我們平時(shí)創(chuàng)建的安卓項(xiàng)目很像，不過他這里的MainActivity繼承的是FlutterActivity。ios當(dāng)然就是ios程序入口，lib就是主要代碼邏輯所在的地方，安卓和ios都是用這里的同一套的代碼的，可以看到文件結(jié)尾是.dart。test就是測(cè)試的。

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

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

參考教程：

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

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

Dart語言教程（一篇相對(duì)來說比較好的Dart教程）

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

Flutter專欄（CSDN上的Flutter專欄，建議從最后一頁開始閱讀）

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