HarmonyOS(64) wrapBuilder 全局@Builder使用利器

WrapBuilder

全局@Builder是什么
什么时候使用wrapBuilder
@Builder的限制
参考资料

全局@Builder是什么

局部@Builder的定义方法如下：

//定义局部@Builder
@Builder MyBuilderFunction() {}
//使用方法
this.MyBuilderFunction()

全局@Builder定义语法如下：

//全局@Builder
@Builder function MyGlobalBuilderFunction() { ... }
//使用方法
MyGlobalBuilderFunction()

什么时候使用wrapBuilder

什么时候使用wapBuilder，HarmonyOS官方文档给的解释是：当开发者在一个struct内使用了多个全局@Builder函数，来实现UI的不同效果时，多个全局@Builder函数会使代码维护起来非常困难，并且页面不整洁。此时，开发者可以使用wrapBuilder来封装全局@Builder

另外wrapBuilder在组件全局复用上有很重要的作用，详见HarmonyOS(63) ArkUI 自定义占位组件NodeContainer

@Builder的限制

当@Builder方法赋值给变量或者数组后，赋值的变量或者数组在UI方法中无法使用，此时wrapBuilder就可以解决这方面的不足。使用wrapBuilder作为全局@Builder封装函数。wrapBuilder的参数返回WrapBuilder对象，实现全局@Builder可以进行赋值和传递。
无效的代码：

//定义一个全局的@Builder
@Builder function builderElement() {}
//builderArr是一个@Builder方法组成的数组
let builderArr: Function[] = [builderElement];
@Builder function testBuilder() {//此段代码无效。ForEach(builderArr, (item: Function) => {item();})
}

改正后的方法：

//定义一个全局的@Builder
@Builder function builderElement() {}
//builderArr是一个@Builder方法组成的数组
let builderArr: WrappedBuilder<[]>[] = [wrapBuilder(builderElement)]
@Builder function testBuilder() {//此段代码无效。ForEach(builderArr, (item: WrappedBuilder<[]>) => {item.builder()}
}

上面builderElement是一个没有参数的@Builder，wrapBuilder也可以传参数，比如下面的function。

//带参数的Builder
@Builder function MyBuilder(value: string, size: number) {Text(value).fontSize(size)
}
//WrappedBuilder传递参数
let builderVar: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)