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 支持常用的渲染组件，对于交互逻辑较多的组件比如 TextField 暂不支持。

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

图文方面，支持基础的文本/富文本，asset 图片和网络图片。

对于基础的交互事件 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 列表，方便了解每个组件的属性和如何使用。

FLSliverPersistentHeaderWidgetBuilder 可以帮助构建列表区域，并且使其中头部组件附带吸顶效果。

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

欢迎关注掘金主页，需要订阅的话也可以关注公众号：