Flutter系列（一）——詳細介紹

時間 2020-03-06

標籤 flutter 系列詳細介紹简体版

原文原文鏈接

什麼是Flutter

Flutter 是谷歌推出的開發移動UI框架，能夠快速的在IOS和Android上構建高質量的原生用戶界面。java

Flutter能夠與現有的代碼一塊兒工做，而且Flutter是徹底免費的，開源的。react

總結來講：小程序

Flutter是一款移動應用程序SDK，包含框架、widget和工具，爲開發人員提供了一種在Android和iOS上構建和部署精美移動應用程序的簡單高效的方式。微信小程序

Flutter的優點

快速開發

毫秒級的熱重載，修改後，您的應用界面會當即更新。使用豐富的、徹底可定製的widget在幾分鐘內構建原生界面。瀏覽器

富有表現力和靈活的UI

快速發佈聚焦於原生體驗的功能。分層的架構容許您徹底自定義，從而實現難以置信的快速渲染和富有表現力、靈活的設計。微信

原生性能

Flutter包含了許多核心的widget，如滾動、導航、圖標和字體等，這些均可以在iOS和Android上達到原生應用同樣的性能。weex

Flutter的開發語言

Flutter採用的是Dart做爲開發框架和widget的語言。架構

爲何選擇Dart語言？

Flutter在四個主要維度進行了評估，並考慮了框架做者、開發人員和最終用戶的需求等因素。咱們發現不一樣的語言在不一樣的層面符合一部分需求，但Dart在全部評估維度上得分都很高，而且符合咱們的全部要求和標準。框架

Dart運行時和編譯器支持Flutter的兩個關鍵特性的組合：dom

基於JIT的快速開發週期：容許使用類型的語言進行形狀更改和有狀態的熱重載；

以及AOT編譯器，可生成高效的ARM代碼，能夠快速啓動並擁有可預測的生產部署性能。

此外，咱們有機會與Dart社區密切合做，Dart社區正在積極投入資源改進Dart在Flutter中的使用。例如，當咱們採用Dart時，該語言沒有提供生成原生二進制文件的工具鏈（這對於實現可預測的高性能是頗有幫助的），可是如今實現了，由於Dart團隊爲Flutter構建了它。一樣，DartVM以前已經針對吞吐量進行了優化，但團隊如今正在優化VM的延遲時間，這對於Flutter的工做負載更爲重要。

Dart在如下主要標準上獲得高分：

開發人員的效率 Flutter的主要價值主張之一是經過讓開發人員使用相同的代碼庫爲iOS和Android建立應用程序，從而節省了工程資源。使用高效的語言能夠進一步加速開發週期，並使Flutter更具吸引力。這對咱們的framework團隊和開發人員都很是重要。大部分Flutter功能都是用Dart實現，所以咱們須要在10萬行代碼時能保持高效的而不會犧牲framework和widget的可讀性。

面向對象雖然咱們可使用非面向對象的語言，但這意味着要從新解決幾個難題。另外，絕大多數開發人員都具備面向對象開發的經驗，所以更容易學習如何使用Flutter進行開發。

可預測，高性。藉助Flutter，咱們但願使開發人員可以快速建立流暢的用戶體驗。爲了實現這一點，咱們須要可以在每一個動畫幀中運行大量的代碼。這意味着咱們須要一種既能提供高性能又能提供可預測性能的語言，而不會出現會致使丟幀的週期性暫停。

快速內存分配 Flutter框架使用函數式流，它很大程度上依賴於底層的內存分配器，從而有效地處理小的、短時間的內存分配會很是重要，因此在缺少此功能的語言中Flutter沒法有效地工做。

Flutter應用程序性能如何？

Flutter應用程序性能很是出色。Flutter旨在幫助開發人員輕鬆實現恆定的60fps。Flutter應用程序經過本機編譯的代碼運行 - 不涉及解釋器。這意味着Flutter應用程序能夠快速啓動並執行。
Flutter開發體驗如何？編輯和刷新之間有多長時間？
Flutter實現了熱重載開發循環。您能夠在設備或模擬器上實現亞秒級重載。
Flutter的熱重載是有狀態的，這意味着應用程序狀態在重載後仍然會保留。因此您能夠在應用程序中各個頁面快速迭代開發，而無需在每次從新加載後都要從主屏幕從新開始。

Flutter的優點

綜上所述，總結來講，Flutter的優點有以下幾個方面

性能強大，流暢
Flutter對比weex和react native相比，性能的強大是有目共睹的。基於dom樹渲染原生組件，很難與直接在原生視圖上繪圖比肩性能，Google做爲一個輪子大廠，直接在兩個平臺上重寫了各自的UIKit，對接到平臺底層，減小UI層的多層轉換，UI性能能夠比肩原生，這個優點在滑動和播放動畫時尤其明顯。

路由設計優秀
Flutter的路由傳值很是方便，push一個路由，會返回一個Future對象（也就是Promise對象），使用await或者.then就能夠在目標路由pop，回到當前頁面時收到返回值。這個反向傳值的設計基本是甩了微信小程序一條街了。彈出dialog等一些操做也是使用的路由方法，幾乎不用擔憂出現傳值困難

單例模式
Flutter支持單例模式，單例模式的實現也很是簡單。單例模式很好的解決了一些問題。相比之下，js的單例則並非一個真正的單例，或者說不是一個簡單的單例，這也是受限於js所運行的環境。單例模式並不老是合理的，容易被濫用。可是在App的初期開發中，每每一個容易實現的單例能夠幫助咱們快速完成一些邏輯的搭建。

優秀的動畫設計
Flutter的動畫簡單到難以想象，動畫對象會根據屏幕刷新率每秒產生不少個（通常是60個）浮點數，只須要將一個組件屬性經過補間（Tween）關聯到動畫對象上，Flutter會確保在每一幀渲染正確的組件，從而造成連貫的動畫。這種十分暴力的操做在Flutter上卻看不到明顯的卡頓，這也是Flutter的一個魔力所在。相比之下其餘跨平臺框架幾乎不能設計動畫……每每會遭遇很是嚴重的性能問題。

UI跨平臺穩定
Google直接在兩個平臺上在底層重寫了UIKit，不依賴於Css等外部解釋器，幾乎不存在UI表達不理想，渲染不正常的狀況，能夠得到很是穩定的UI表達效果。Css換個瀏覽器就有不一樣的表現，基於Css的跨平臺框架很難得到穩定的UI表現。

可選靜態的語言，語言特性優秀
Dart是一個靜態語言，這也是相對於js的一個優點。Dart能夠被編譯成js，可是看起來更像java。靜態語言能夠避免錯誤，得到更多的編輯器提示詞，極大的增長可維護性。不少js庫也已經用ts重寫了，Vue3.0的底層也將所有使用ts編寫，靜態語言的優點不言而喻。