HarmonyOS动态UI创建,实现网页和视频秒开效果

809 阅读2分钟

简介

为了解决页面、组件加载缓慢的问题,ArkUI框架提供了动态操作以实现组件预创建,并允许应用在运行时根据实际需要加载渲染相应的组件。动态操作包含动态创建组件(动态添加组件)、动态卸载组件(动态删除组件)等相关操作。动态创建组件指在非build生命周期中进行组件创建,即在build生命周期前提前创建组件。通过动态创建组件,开发者不但可以节省组件创建的时间,提升用户体验,还可以将独立的逻辑进行封装,开发者能更加灵活地管理组件,有助于应用模块化开发。动态卸载组件是对动态创建的组件进行卸载、删除。

原理

利用组件预创建机制,可以利用动画执行过程空闲时间进行组件预创建和属性设置。在动画结束后,再进行属性和布局的更新,节省了组件创建的时间,从而加快了页面渲染

dynamicUi.jpg

要素

自定义占位容器组件,主要是用于显示自定义节点以及自定义节点树的显示和复用,相当于Stack组件,仅具备组件的通用属性

通过makeNode回调返回一个FrameNode节点树的根节点。将FrameNode节点树挂载到对应的NodeContainer下。同时提供了aboutToAppear、aboutToDisappear、aboutToResize、onTouchEvent、rebuild五个回调方法用于监听对应的NodeContainer的状态

一个FrameNode节点,提供创建和删除能力,支持通用属性、设置事件回调,并提供完整的自定义能力,包括自定义测量、布局以及绘制

一个ReanderNode节点,更加轻量级的渲染节点,仅包含渲染相关的能力

挂载原生组件,支持通过无状态的UI方法全局@Builder生成组件树,并通过getFrameNode获取组件树的根FrameNode节点。该节点可以通过NodeController直接返回,挂载在NodeContainer节点下

串起来理解一下,就是用NodeContainer在布局中占用位置,通过NodeController加载节点,可加载FrameNode,RenderNode节点,BuilderNode 加载@builder组件,去获取FrameNode节点,再挂树。

微信图片_20240825182711.png

效果

8月25日.gif

通过对比,普通加载网页和动态创建Node挂载网页,能达到秒开效果。 Video播放页也是能达到秒起播效果。

总结

对于需要性能提升页面,这种秒加载网页效果确实不错,但是实际原理还是牺牲了内存空间,通过预加载Node,当要挂载显示的时候可以达到秒开效果。

Demo