HarmonyOS开发日记 ：自定义节点，实现 UI 组件 动态创建、更新

引言

UI动态操作包含组件的动态创建、卸载、更新等相关操作。

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

UI 动态操作（创建、显示、更新）

下面是一个简单的示例：

通过 BuilderNode + NodeController + Builder 使用 UI 动态操作。

• 1. 准备好需要挂载的节点及要绑定的数据模型

// 要绑定的数据模型
class Params {
  text: string = ''

  constructor(text: string) {
    this.text = text
  }
}

// 这个就是我们要挂载的节点内容
@Builder
function customNodeBuilder(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(25)
      .margin({ bottom: 15 })
  }
}

• 1. 封装 controller 用于实现自定义节点的创建、显示、更新等操作

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

• 1. 使用、显示自定义节点

@Component
e