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 能够帮助构建列表区域，而且使其中头部组件附带吸顶效果。

另外新版本还补充了一些属性而且针对以前的问题进行了修复。

---

欢迎关注掘金主页，须要订阅的话也能够关注公众号：