当前位置：首页 > news >正文

【鸿蒙开发】组件动态创建

news 来源：原创 2025/6/13 10:12:40

组件动态创建的原理

在声明式范式中，所有的组件在build环节被创建出来，并挂在到组件书中。当组件非多多时，一次性全部创建出来将非常耗时，而通过动态创建组件可以在build环节之前对组件进行预创建，在页面实际加载时可以很快的拿来直接使用，从而加快页面渲染速度。

结合动画：

没有预创建时：必须等待动画结束后进行组件创建。
有预创建时：可以在动画加载中就开始创建组件，等动画结束后可以很快的显示组件。

动态创建组件的优势

减少自定义组件的创建开销

组件更新更快

灵活性高，可以自由控制组件中节点的更新，实现高效的节点树裁剪。

直接操作组件树

通过makeNode和replaceBuilderNode可以自由控制组件的创建和更新。

组件的动态添加、更新和删除

代码参考，可以直接在v5.0.5上运行。

import { BuilderNode, FrameNode, NodeController } from '@kit.ArkUI';// 动态组件的业务参数
class Params {text: string = 'Hello World';constructor(text: string) {this.text = text;}
}// 构建动态组件
@Builder
function buildText(params: Params) {Column() {Text(params.text).fontSize(50).fontWeight(FontWeight.Bold).margin({ bottom: 36 })}
}// 通过继承NodeController来控制动态组件的生命周期
class TextNodeController extends NodeController {private textNode: BuilderNode<[Params]> | null = null;private message: string = '';constructor(message: string) {super();this.message = message;}// 动态创建组件节点makeNode(context: UIContext): FrameNode | null {if (this.textNode == null) {this.textNode = new BuilderNode(context);this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));}return this.textNode.getFrameNode();}// 动态替换组件节点replaceBuilderNode(newNode: BuilderNode<Object[]>) {this.textNode = newNode;this.rebuild();}}@Entry
@Component
struct Index {@State message: string = "hello";@State isShow: boolean = true;private textNodeController: TextNodeController = new TextNodeController(this.message);build() {Row() {Column() {if (this.isShow) { // 控制动态删除组件NodeContainer(this.textNodeController) // 动态添加组件.width('100%').height(100).backgroundColor('#FFF0F0F0')}Button('replaceNode').onClick(() => {// 通过按钮事件来动态更新组件// 用新的节点替换之前的节点this.textNodeController.replaceBuilderNode(this.buildNewNode());})}.width('100%').height('100%')}.height('100%')}// 生成新的节点buildNewNode(): BuilderNode<[Params]> {let uiContext: UIContext = this.getUIContext();let message = 'newNode';let textNode = new BuilderNode<[Params]>(uiContext);textNode.build(wrapBuilder<[Params]>(buildText), new Params(message))return textNode;}}

NodeController生命周期

NodeController用于控制和反馈对应的NodeContainer上的节点的行为，需要与NodeContainer一起使用。下面，对其常用生命周期函数进行说明。

makeNode必须要重写的方法，用于构建节点树、返回节点挂载在对应NodeContainer中。在对应NodeContainer创建绑定当前NodeController的时候调用、或者通过rebuild方法调用刷新。
aboutToResize当controller对应的NodeContainer在Mesure的时候进行回调，入参为节点的布局大小。
aboutToAppear当controller对应的NodeContainer在onAppear的时候进行回调。
aboutToDisappear当controller对应的NodeContainer在onDisappear的时候进行回调。

export abstract class NodeController {abstract makeNode(uiContext: UIContext): FrameNode | null;aboutToResize?(size: Size): void;aboutToAppear?(): void;aboutToDisappear?(): void;abstract rebuild(): void;onTouchEvent?(event: TouchEvent): void;
}