Flutter技術簡介

NO IMAGE
1.Flutter簡介

​ Flutter是Google開發的一套全新的跨平臺、開源UI框架,支持iOS、Android系統開發,並且是未來新操作系統Fuchsia的默認開發套件。2017年5月發佈第一個版本,並且在2018年12月初發布1.0穩定版,2019年MWC上發佈1.2版本。

​ 在Flutter之前已經有好多跨平臺UI解決方案,基於WebView的Cordova,基於JavaScript渲染成原生控件的React Native。而Flutter完全顛覆了以往的依賴,使用Skia作為2D渲染引擎,自建UI。

技術類型UI渲染方式性能開發效率動態化框架代表
H5+原生WebView渲染一般支持Cordova
JavaScript+原生原生控件渲染支持RN
自繪UI+原生調用系統API渲染FLutter高,QT低默認不支持Flutter,QT

2. Flutter架構圖

Flutter技術簡介

框架的上層比下層使用更頻繁。更詳細的查看API文檔

  • Flutter Framework:純Dart實現的SDK
    • 底下兩層:底層UI庫,提供動畫、繪製能力、手勢
    • Rendering層:構建UI樹,當UI樹有變化的時候,會計算出變化的部分,然後更新UI樹,將UI樹繪製到屏幕上
    • Widgets層:提供組件庫,提供了Material和Cupertino兩種視覺風格的組件庫
  • Engine層:使用C/C++實現的SDK,主要包括Skia、Dart和Text
    • Skia:開源的二維圖形庫,提供了適用於多種軟硬件平臺的通用API
    • Dart部分:Dart Runtime,Garbage Collection,如果是debug模式的話,包括JIT(just in time)支持,Release和profile模式下是AOT(ahead of time)編譯成了原生的arm代碼,不存在JIT部分。
    • Text:文本渲染,渲染層次如下:衍生自minikin的libtxt庫
  • Embedder層
    • Embedder是一個嵌入層,即把Flutter嵌入到各個平臺上去,這裡做的主要工作包括渲染Surface設置,線程設置,以及插件等。從這裡可以看出,Flutter的平臺相關性很低,平臺只提供一個畫布,剩餘所有渲染相關的邏輯都在Flutter內部,這就使得它具有很好的跨端一致性。

3. Flutter渲染機制

3.1Flutter佈局渲染的整理流程

Flutter界面的渲染過程分為三個階段:佈局、繪製、合成,佈局和繪製在Flutter框架中完成,合成則交由引擎負責。

因為直接交付給GPU多圖層視圖數據是低效的,可能會重複繪製,所以還需要進行一步圖層合成,最後才交由引擎負責光柵化視圖,所以添加了合成圖層。

用戶操作->更新動畫->構建控件->佈局->繪製圖層->合成圖層->光柵化

3.2虛擬DOM技術

Widget——>Element——>RenderObject

Widget樹就是我們的UI組件樹,但這個只是一種描述信息,渲染引擎不認識,RenderObject樹才是渲染引擎真的認識的,我們需要將Widget轉化為能用來渲染視圖的RenderObject。

虛擬DOM解決了一個重要的矛盾:就是DOM操作的性能損耗與頻繁進行局部DOM操作的矛盾。

沒有用虛擬DOM之前,DOM會在每次元素更新來到之時渲染一次DOM

用了虛擬DOM後,虛擬DOM會先彙總各個元素的更新情況,通過diff算法計算出與原來DOM樹的差異,最後通過一次DOM更新解決。

3.3構建widget

您可以通過實現widget的build返回widget樹(或層次結構)來定義widget的獨特特性。這棵樹更具體地表示了用戶界面的widget層次。例如,工具欄widget的build函數可能返回一個包含一些文本和各種按鈕的水平佈局。然後,框架遞歸地構建widget,直到將所有的widget構建完成,然後framework將他們一起添加到樹中。

widget的構建函數一般沒有副作用。每當它被要求構建時,widget應該返回一個新的widget樹,無論widget以前返回的是什麼。framework回將之前的構建與當前的構建比較並確定需要對用戶界面進行哪些修改。

這種自動化比較非常有效,可以實現高性能的交互式應用程序。而構建函數的設計則著重於聲明widget是由什麼構成的,而不是將用戶界面從一個狀態更新到另一個狀態,從而簡化了代碼。

4. 其他

4.1支持JIT和AOT運行模式

  • 基於JIT的快速開發:Flutter在開發階段採用JIT模式,支持HOT Load,避免了每次改動都要進行編譯,節省開發時間。
  • 基於AOT的發佈包:在Flutter發佈時可以通過AOT生成高效的ARM代碼以保證性能。執行效率比JavaScript高。同時,在debug包上測試的時候發現運行效率不夠,打一個release包會有意想不到的效果。

4.2 Flutter中一切皆widget

之前的文章裡也有強調過,widget是Flutter應用程序的構建塊。每個widget都是用戶界面一部分的不可變聲明。與其他將視圖、控制器、佈局和其他屬性分離的框架不同,Flutter具有一致的統一對象模型:widget。

4.3Flutter編寫並行/併發應用程序

Flutter支持isolates。isolates是Flutter虛擬機中的獨立堆,他們可以並行運行(通常作為單獨的線程實現),isolates通過發送和接收異步消息進行通信。

更多關注微信公眾號:Flutter入門

Flutter技術簡介

相關文章

FlutterViewPager使用及深入

FlutterDraggableandDragTarget拖拽控件

FlutterListView封裝,下拉刷新、上拉加載更多

Flutter基礎控件介紹