鸿蒙 ArkUI 组件动态化：自定义 FrameNode 实现

继承 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 {
    return null; // 待实现
  }
}

步骤 3：实现 makeNode() 方法

创建 BuilderNode 实例并构建组件树，返回要显示的节点。

makeNode(context: UIContext): FrameNode | null {
  // 创建 BuilderNode 实例
  this.textNode = new BuilderNode(context);
  // 构建组件树
  this.textNode.build(wrapBuilder<[Params]>(testBuilder), newParams(this.message));
  // 返回要显示的节点
  return this.textNode.getFrameNode();
}

步骤 4：显示自定义节点

使用 NodeContainer 容器和对应的 NodeController 显示节点。

@Entry
@Component
struct Index {
  private textNodeController: TextNodeController = new TextNodeController('hello');

  build() {
    Column() {
      NodeContainer(this.textNodeController).width('100%').height(100)
    }
  }
}

3.2 动态删除组件

通过条件控制语句将 NodeContainer 节点从界面上移除。

if (this.isShow) {
  NodeContainer(this.textNodeController).width('100%').height(100)
}
Button('isShow').onClick(() => {
  this.isShow = false; // 点击后移除节点
})

3.3 动态更新组件

通过 NodeController 的 rebuild() 方法触发 makeNode() 回调，刷新 NodeContainer 上显示的节点。

class TextNodeController extends NodeController {
  // ... 其他代码
  replaceBuilderNode(newNode: BuilderNode<Object[]>) {
    this.textNode = newNode;
    this.rebuild(); // 重新调用 makeNode 方法
  }
}
// 使用示例
Button('replaceNode').onClick(() => {
  this.textNodeController.replaceBuilderNode(this.buildNewNode());
})

4. NodeController 生命周期管理

NodeController 用于控制和反馈对应 NodeContainer 上节点的行为，提供以下关键生命周期方法：

5. 总结与最佳实践

组件动态操作是 ArkUI 框架中提升性能与灵活性的关键技术，特别适用于：

1. 性能敏感场景：需要快速加载和响应的页面
2. 动态内容展示：内容布局在运行时确定的场景
3. 复杂交互应用：需要频繁更新和调整组件树的应用

最佳实践建议：

• 合理使用预创建机制，充分利用空闲时间
• 对复杂组件树考虑使用 FrameNode 替代自定义组件
• 精确控制 NodeController 的生命周期，避免内存泄漏
• 在实际业务中根据内容类型动态选择构建策略

通过掌握组件动态操作技术，开发者可以显著提升 HarmonyOS 应用的性能和用户体验，实现更加灵活高效的 UI 开发。