【HarmonyOS NEXT】鸿蒙如何动态添加组件(wrapBuilder:封装全局@Builder)官方推荐方式

全局@Builder作为wrapBuilder的参数返回WrappedBuilder对象,实现全局@Builder可以进行赋值和传递。

说明

从API version 11开始使用。

接口说明

wrapBuilder是一个模板函数,返回一个WrappedBuilder对象。

javascript 复制代码
declare function wrapBuilder< Args extends Object[]>(builder: (...args: Args) => void): WrappedBuilder;

同时 WrappedBuilder对象也是一个模板类。

javascript 复制代码
declare class WrappedBuilder< Args extends Object[]> {
  builder: (...args: Args) => void;

  constructor(builder: (...args: Args) => void);
}

说明:模板参数Args extends Object[]是需要包装的builder函数的参数列表

使用方法:

javascript 复制代码
let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
let builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder)] //可以放入数组

限制条件

wrapBuilder方法只能传入全局@Builder方法。

wrapBuilder方法返回的WrappedBuilder对象的builder属性方法只能在struct内部使用。

使用场景1

将wrapBuilder赋值给globalBuilder,且把MyBuilder作为wrapBuilder参数,用来替代MyBuilder不能直接赋值给globalBuilder。

javascript 复制代码
@Builder
function MyBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
}

let globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        globalBuilder.builder(this.message, 50)
      }
      .width('100%')
    }
    .height('100%')
  }
}

使用场景2

自定义组件Index使用ForEach来进行不同@Builder函数的渲染,可以使用builderArr声明的wrapBuilder数组进行不同@Builder函数效果体现。整体代码会较整洁。

javascript 复制代码
@Builder
function MyBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
}

@Builder
function YourBuilder(value: string, size: number) {
  Text(value)
    .fontSize(size)
    .fontColor(Color.Pink)
}

const builderArr: WrappedBuilder<[string, number]>[] = [wrapBuilder(MyBuilder), wrapBuilder(YourBuilder)];



@Entry
@Component
struct Index {
  @Builder testBuilder() {
    ForEach(builderArr, (item: WrappedBuilder<[string, number]>) => {
      item.builder('Hello World', 30)
    }

    )
  }

  build() {
    Row() {
      Column() {
        this.testBuilder()
      }
      .width('100%')
    }
    .height('100%')
  }
}

错误场景

javascript 复制代码
function MyBuilder() {

}

// wrapBuilder必须传入被@Builder修饰的全局函数。
const globalBuilder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        globalBuilder.builder(this.message, 30)
      }
      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
遇到困难睡大觉哈哈6 小时前
鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍
华为·harmonyos·鸿蒙
MarkHD8 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
塞尔维亚大汉9 小时前
OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【用户态内存调测】
操作系统·harmonyos
别说我什么都不会9 小时前
鸿蒙轻内核M核源码分析系列五 时间管理
操作系统·harmonyos
李小轰_Rex13 小时前
现有Flutter项目适配鸿蒙:探索跨平台开发的无限可能
前端·flutter·harmonyos
竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。17 小时前
思科、华为、H3C常用命令对照表
运维·服务器·网络·华为
weioule18 小时前
仿叮咚买菜鸿蒙原生APP
华为·harmonyos
Gratitute_林腾18 小时前
HarmonyOS4-工具安装
harmonyos
咸鱼过江19 小时前
openharmony中hdf框架的设备节点(HdfDeviceNode)和设备实例(HdfDevice)的区别
c语言·harmonyos·hdf框架
枫叶丹420 小时前
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(四) -> 常见组件(二) -> tabs
开发语言·前端·javascript·华为·华为云·harmonyos