一、Flutter是什么？

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

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

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

特點：

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

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

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

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

????????寫過網(wǎng)頁的小伙伴們看到這個Row和Colume可能會有點熟悉，因為這個概念就是從web那邊搬過來的，而且Flutter的設(shè)計靈感也是從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)時他們顯示的樣子。但是這里要注意的一點是，不像Android里的view是可以直接修改的，F(xiàn)lutter的設(shè)計理念里widget是不可變的，不會直接更新，而必須使用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ā)體驗：Flutter擁有豐富的工具和庫，可以幫助開發(fā)者輕松地同時在iOS和Android系統(tǒng)中實現(xiàn)想法和創(chuàng)意。

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

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

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

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

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

? ? ? 但是Flutter與用于構(gòu)建移動應(yīng)用程序的其它大多數(shù)框架不同，因為Flutter既不使用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)用程序使用本機指令集運行（不涉及解釋器）。而在Android下，F(xiàn)lutter引擎的C/C ++代碼是用Android的NDK編譯的，任何Dart代碼都是AOT編譯成本地代碼的，F(xiàn)lutter應(yīng)用程序依然使用本機指令集運行（不涉及解釋器）。因此，F(xiàn)lutter能達到原生應(yīng)用一樣的性能。

對比圖：左邊->ReactNative。????????????????????????右邊->Flutter。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

參考教程：

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

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

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

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

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

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