HarmonyOS 应用开发之wrapBuilder：封装全局@Builder

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

说明：
从API version 11开始使用。

接口说明

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

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

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

declare class WrappedBuilder< Args extends Object[]> {builder: (...args: Args) => void;constructor(builder: (...args: Args) => void);
}

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

使用方法：

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。

@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函数效果体现。整体代码会较整洁。

@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%')}
}

错误场景

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%')}
}

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05