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

鸿蒙HarmonyOS界面开发-组件动态创建（一）

news 2025/9/18 5:53:12

组件动态创建

组件预创建可以满足开发者在非build生命周期中进行组件创建，创建后的组件可以进行属性设置、布局计算等操作。之后在页面加载时进行使用，可以极大提升页面响应速度。

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

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

动态添加组件

动态添加组件包括以下步骤：

创建自定义节点。
实现NodeController，用于自定义节点的创建、显示、更新等操作的管理，并负责将自定义节点挂载到NodeContainer上。
实现NodeController的makeNode()方法，makeNode()会在NodeController实例绑定NodeContainer的时候进行回调，并将返回的节点挂载至NodeContainer。
使用NodeContainer显示自定义节点。

创建自定义节点

首先，准备好需要挂载的节点

import { BuilderNode, FrameNode, NodeController } from '@kit.ArkUI';class Params {text: string = 'Hello World';constructor(text: string) {this.text = text;}
}@Builder
function testBuilder(params: Params) {Column() {Text(params.text).fontSize(50).fontWeight(FontWeight.Bold).margin({bottom: 36})}
}

实现NodeController

NodeController为抽象类，需要继承并实现NodeController

实现NodeController的makeNode()方法

首先，使用构造函数创建BuilderNode实例。创建BuilderNode对象的时候必须要传入对应的UIContext对象。若BuilderNode作为RenderNode的子节点存在，要求设置RenderOptions的selfIdealSize属性。

然后，使用BuilderNode的build()方法，构建组件树。方法build()需要传入两个参数，第一个参数为通过wrapBuilder()封装的全局@Builder方法。第二个参数为对应的@Builder方法所需的参数对象。若@Builder方法不带参数或者存在默认参数，则build()的第二个参数可以不设置。

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 {// Creating a BuilderNode instancethis.textNode = new BuilderNode(context);// Set the selfIdealSize property// this.textNode = new BuilderNode(context, {selfIdealSize: {width: 100, height :100}});// Build the component tree using the build methodthis.textNode.build(wrapBuilder<[Params]>(testBuilder), new Params(this.message));// Returns the node to be displayedreturn this.textNode.getFrameNode();}
}

显示自定义节点

显示自定义节点依赖声明式渲染容器NodeContainer以及对应的控制类NodeController。

NodeController的makeNode()方法返回的节点会显示在对应的NodeContainer中。由于makeNode()需要返回的为一个FrameNode，因此如果预期显示BuilderNode的时候需要调用对应的BuilderNode的getFrameNode()方法，获取其根节点，详细代码如上TextNodeController中所示。

然后，在页面内新增声明式渲染容器NodeContainer，创建工具类NodeController。通过NodeController将MakeNode中返回的节点在声明式渲染容器中进行显示。

@Entry
@Component
struct Index {@State message: string = "hello";private textNodeController: TextNodeController = new TextNodeController(this.message);build() {Row() {Column() {NodeContainer(this.textNodeController).width('100%').height(100).backgroundColor('#FFF0F0F0')}.width('100%').height('100%')}.height('100%')}
}

动态删除组件

通过条件控制语句可以将NodeContainer节点进行移除或者显示。如示例代码，将this.isShow更改为false则将节点从界面上移除。

@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('isShow').onClick(() => {this.isShow = false;})}.width('100%').height('100%')}.height('100%')}
}

动态更新组件

动态将NodeContainer上的节点替换，依赖于NodeController的makeNode()和rebuild()方法。rebuild方法会触发makeNode的回调，刷新NodeContainer上显示的节点；makeNode()方法返回的为null，则移除NodeContainer下挂载的节点。

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 {// With the addition of null handling, the following code is executed only when the BuilderNode is created for the first time; when replacing a node, textNode is not nullif (this.textNode == null) {this.textNode = new BuilderNode(context);this.textNode.build(wrapBuilder<[Params]>(testBuilder), new Params(this.message));}return this.textNode.getFrameNode();}replaceBuilderNode(newNode: BuilderNode<Object[]>) {this.textNode = newNode;// The rebuild method re-calls the makeNode method.this.rebuild();}
}

开发者可以根据实际情况创建新的节点，参考示例代码如下所示：

// ...
@Entry
@Component
struct Index {@State message: string = "hello";@State isShow: boolean = true;private textNodeController: TextNodeController = new TextNodeController(this.message);// private count = 0;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]>(testBuilder), new Params(message))return textNode;}
}

NodeController生命周期

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

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

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;
}

加入班级，来和我一起学习吧：华为开发者学堂