引言
UI 动态操作包含组件的动态创建、卸载、更新等相关操作。
通过组件预创建，可以满足开发者在非 build 生命周期中进行组件创建，创建后的组件可以进行属性设置、布局计算等操作。之后在页面加载时进行使用，可以极大提升页面响应速度。
UI 动态操作（创建、显示、更新）
下面是一个简单的示例：
通过 BuilderNode + NodeController + Builder 使用 UI 动态操作。
// 要绑定的数据模型class Params { text: string = ''
constructor(text: string) { this.text = text }}
// 这个就是我们要挂载的节点内容@Builderfunction customNodeBuilder(params: Params) { Column() { Text(params.text) .fontSize(25) .margin({ bottom: 15 }) }}
复制代码
class CustomNodeController extends NodeController { private customNode: BuilderNode<[Params]> | null = null; private message: string = "";
constructor(message: string) { super() this.message = message }
makeNode(context: UIContext): FrameNode | null { this.customNode = new BuilderNode(context); this.customNode.build(wrapBuilder<[Params]>(customNodeBuilder), new Params(this.message)) return this.customNode.getFrameNode(); }
// 提供 update 方法供外部调用进行节点更新 update(message: string) { if (this.customNode !== null) { this.customNode.update(new Params(message)); } }}
复制代码
@Componentexport struct BuilderNodeExample { private textNodeController: CustomNodeController = new CustomNodeController('hello'); private count = 0;
build() { Row() { Column() { NodeContainer(this.textNodeController) .width('100%') .height(100) .align(Alignment.Center) Button('Update') .onClick(() => { // 点击按钮主动触发自定义节点的更新 this.count += 1; this.textNodeController.update("Update " + this.count.toString()); }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } .height('100%') .alignItems(VerticalAlign.Center) }}
复制代码
以上示例效果如下：
扩展：NodeController 内各方法回调时机
附注（Example）
Demo 示例已上传：
GitHub：https://github.com/liyufengrex/HarmonyAtomicService
GitCode：https://gitcode.com/liyufengrex/HarmonyAtomicService
（基于 API11 开发，支持 NEXT 及以上版本运行）已上传可供参考，包含如下内容：
静态库+动态包+多模块设计
状态管理
统一路由管理（router+navPathStack）
网络请求、Loading 等工具库封装
自定义组件、自定义弹窗（解耦）
EventBus 事件通知
扩展修饰器，实现 节流、防抖、权限申请
动态路由 （navPathStack + 动态 import + WrappedBuilder）
UI 动态节点操作 (BuilderNode + NodeController)
折叠屏适配示例
组件工厂示例
组件动态属性设置示例
云函数、云数据库使用示例
华为账号服务示例（快速登陆、快速验证手机号）
评论