HarmonyOS :通过 BuilderNode + NodeController 实现 UI 动态操作

引言

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

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

UI 动态操作(创建、显示、更新)

下面是一个简单的示例:

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

    1. 准备好需要挂载的节点及要绑定的数据模型
ts 复制代码
// 要绑定的数据模型
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 用于实现自定义节点的创建、显示、更新等操作
ts 复制代码
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. 使用、显示自定义节点
ts 复制代码
@Component
export 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 内各方法回调时机

方法名称 触发时机
makeNode 当实例绑定的NodeContainer创建的时候进行回调。或者可以通过NodeController的rebuild()方法进行回调的触发
aboutToAppear 当NodeController绑定的NodeContainer挂载显示时触发此回调
aboutToDisappear 当NodeController绑定的NodeContainer卸载消失时触发此回调
aboutToResize 当NodeController绑定的NodeContainer布局的时候触发此回调
onTouchEvent 当NodeController绑定的NodeContainer收到Touch事件时触发此回调
rebuild 调用此接口通知NodeContainer组件重新回调makeNode方法,更改子节点

附注(Example)

Demo示例(基于API11开发,支持NEXT及以上版本运行)已上传可供参考,包含如下内容:

  • 静态库+动态包+多模块设计
  • 状态管理
  • 统一路由管理(router+navPathStack)
  • 网络请求、Loading 等工具库封装
  • 自定义组件、自定义弹窗(解耦)
  • EventBus 事件通知
  • 扩展修饰器,实现 节流、防抖、权限申请
  • 动态路由 (navPathStack + 动态import + WrappedBuilder)
  • UI动态节点操作 (BuilderNode + NodeController)
相关推荐
熊的猫26 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
SuperHeroWu729 分钟前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596932 小时前
前端预览word、excel、ppt
前端·word·excel