FLUI 0.9 版本發佈，新增動態渲染模塊 Dynamic

FLUI 發佈了 0.9 版本，新增了動態渲染模塊 Dynamic，新增懸浮列表頭組件，另外針對文檔完善了 API 列表而且修復了若干問題。

Dynamic

Dynamic 模塊容許咱們加載下發或者緩存的 JSON 來完成渲染。

DSL 設計上語義接近 Flutter 原始組件，僅僅是針對每一個組件擴充了相似 uniqueId, unitName 這種標識性的屬性。因此在設置組件名時通常使用 Flutter 對應的 Widget 名稱，具體映射關係可參照文檔

實現上 Dynamic 會將傳入的 JSON 字符串反序列化成內置對象模型，而後生成 Widget 樹，最後將該樹根節點傳遞給容器組件。

因爲 Google 在 Flutter 上禁用 dart:mirrors 致使動態性較弱，因此 Dynamic 是基於 Flutter 組件基礎上作了封裝，對一些交互性較強的場景暫時不能支持，推薦在一些靜態顯示區域作動態化下發和緩存的嘗試。

Dynamic 會對傳入的字符串進行 JSON 解析，但你也能夠自行把其餘格式好比 XML 或者 Protobuf 解析成指定模型對象，而後傳遞給容器視圖，依舊能夠完成 UI 的渲染。

當你下發數據時，能夠給指定的容器設置佔位的 loading 組件以下圖所示:

Dynamic 功能

目前 Dynamic 支持經常使用的渲染組件，對於交互邏輯較多的組件好比 TextField 暫不支持。

佈局方面，支持 Flex 以及 Stack-Positioned，另外也有 ListView 可供使用：

圖文方面，支持基礎的文本/富文本，asset 圖片和網絡圖片。

對於基礎的交互事件 Dynamic 也有封裝，具體的定義和使用能夠參照文檔。

Dynamic 性能

耗時

這裏選用簡介上方的示例圖 Extend GitHub Demo ，該 json 字符串長度爲 5068 ，最深嵌套層級爲 9 ，下面爲不一樣設備上的時間消耗：

階段 \ 設備	iPhone 7 Plus	iPhone X	OnePlus 7 Pro
JSON 解析	1 ~ 8 ms	1 ~ 10 ms	2 ~ 16 ms
生成 Content Widget	0 ~ 2 ms	0 ~ 1 ms	0 ~ 3 ms
組件初始化到首幀總耗時	54 ~ 106 ms	41 ~ 75 ms	85 ~ 160 ms

能夠看到 Dynamic 引入的相關耗時較低，主要時間消耗依舊在渲染視圖階段。

幀率

幀率方面 ( 來自 OnePlus 7 Pro 的數據 ) , 渲染組件樹加 push 動畫過程當中，最長一幀繪製時間爲 30 ~ 40 ms，而大部分時間集中在 6 ~ 10 ms / frame，以某一次時間幀率波動爲例：

而渲染一個相同原生組件樹的幀率波動與 Dynamic 是類似的，並沒有明顯差別。

內存

一樣是 Extend GitHub Demo，某一時刻內存快照排名前十的對象以下：

Dynamic 模型前五以下:

相對而言，組件樹上的對象在內存中佔比相對較高但一樣也須要注意動態渲染模型的數量不要過多。

其餘更新

API Table

對組件文檔頁面添加了 API 列表，方便了解每一個組件的屬性和如何使用。

列表頭部組件

FLSliverPersistentHeaderWidgetBuilder 能夠幫助構建列表區域，而且使其中頭部組件附帶吸頂效果。

另外新版本還補充了一些屬性而且針對以前的問題進行了修復。

---

歡迎關注掘金主頁，須要訂閱的話也能夠關注公衆號：