Flutter系列(一)——詳細介紹

Demo_Yang發表於2020-02-17

什麼是Flutter

Flutter 是谷歌推出的開發移動UI框架,可以快速的在IOSAndroid上構建高質量的原生使用者介面。

Flutter可以與現有的程式碼一起工作,並且Flutter是完全免費的,開源的。

總結來說:

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

Flutter的優勢

快速開發

毫秒級的熱過載,修改後,您的應用介面會立即更新。使用豐富的、完全可定製的widget在幾分鐘內構建原生介面。

富有表現力和靈活的UI

快速釋出聚焦於原生體驗的功能。分層的架構允許您完全自定義,從而實現難以置信的快速渲染和富有表現力、靈活的設計。

原生效能

Flutter包含了許多核心的widget,如滾動、導航、圖示和字型等,這些都可以在iOS和Android上達到原生應用一樣的效能。

Flutter的開發語言

Flutter採用的是Dart作為開發框架和widget的語言。

為什麼選擇Dart語言?

Flutter在四個主要維度進行了評估,並考慮了框架作者、開發人員和終端使用者的需求等因素。我們發現不同的語言在不同的層面符合一部分需求,但Dart在所有評估維度上得分都很高,並且符合我們的所有要求和標準。

Dart執行時和編譯器支援Flutter的兩個關鍵特性的組合:

基於JIT的快速開發週期:允許使用型別的語言進行形狀更改和有狀態的熱過載;

以及AOT編譯器,可生成高效的ARM程式碼,可以快速啟動並擁有可預測的生產部署效能。

此外,我們有機會與Dart社群密切合作**,Dart社群正在積極投入資源改進DartFlutter中的使用。例如,當我們採用Dart時,該語言沒有提供生成原生二進位制檔案的工具鏈(這對於實現可預測的高效能是很有幫助的),但是現在實現了,因為Dart團隊為Flutter構建了它。同樣,DartVM之前已經針對吞吐量進行了優化,但團隊現在正在優化VM的延遲時間,這對於Flutter**的工作負載更為重要。

Dart在以下主要標準上得到高分:

開發人員的效率 Flutter的主要價值主張之一是通過讓開發人員使用相同的程式碼庫為iOSAndroid建立應用程式,從而節省了工程資源。使用高效的語言可以進一步加速開發週期,並使Flutter更具吸引力。這對我們的framework團隊和開發人員都非常重要。大部分Flutter功能都是用Dart實現,因此我們需要在10萬行程式碼時能保持高效的而不會犧牲frameworkwidget的可讀性。

物件導向雖然我們可以使用非物件導向的語言,但這意味著要重新解決幾個難題。另外,絕大多數開發人員都具有物件導向開發的經驗,因此更容易學習如何使用Flutter進行開發。

可預測,高性。藉助Flutter,我們希望使開發人員能夠快速建立流暢的使用者體驗。為了實現這一點,我們需要能夠在每個動畫幀中執行大量的程式碼。這意味著我們需要一種既能提供高效能又能提供可預測效能的語言,而不會出現會導致丟幀的週期性暫停。

快速記憶體分配 Flutter框架使用函式式流,它很大程度上依賴於底層的記憶體分配器,從而有效地處理小的、短期的記憶體分配會非常重要,所以在缺乏此功能的語言中Flutter無法有效地工作。

Flutter應用程式效能如何?

Flutter應用程式效能非常出色。Flutter旨在幫助開發人員輕鬆實現恆定的60fpsFlutter應用程式通過本機編譯的程式碼執行 - 不涉及直譯器。這意味著Flutter應用程式可以快速啟動並執行。 Flutter開發體驗如何?編輯和重新整理之間有多長時間? Flutter實現了熱過載開發迴圈。您可以在裝置或模擬器上實現亞秒級過載。 Flutter的熱過載是有狀態的,這意味著應用程式狀態在過載後仍然會保留。所以您可以在應用程式中各個頁面快速迭代開發,而無需在每次重新載入後都要從主螢幕重新開始。

Flutter的優勢

綜上所述,總結來說,Flutter的優勢有如下幾個方面

效能強大,流暢 Flutter對比weexreact 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編寫,靜態語言的優勢不言而喻。

最後

當然,Flutter也有一些不足,還有和React Native的比較我會在下一篇文件當中詳細介紹介紹。

Flutter已經是Top20的軟體庫,通過接下來的一系列的文章,希望我和大家一起來學習Flutter,一起進步,一起有所收穫,掌握未來技術主流的主動權!

有什麼好的建議,意見,想法歡迎給我留言!

歡迎關注公共號

關注公眾號會有更多收穫!

動動小手指點贊,收藏,關注一鍵三連走一波吧!

個人微信

我們一起討論,進步,提高!

加的人較多,請新增備註

參考

www.jianshu.com/p/c51fc925b…

flutterchina.club/


相關文章