全局@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%')
}
}
使用场景3
通过按引用传递的方式传入参数,会触发UI的刷新。
class Tmp {
paramA2: string = 'hello';
}
@Builder function overBuilder(param: Tmp) {
Column(){
Text(`wrapBuildervalue:${param.paramA2}`)
}
}
const wBuilder: WrappedBuilder<[Tmp]> = wrapBuilder(overBuilder);
@Entry
@Component
struct Parent{
@State label: Tmp = new Tmp();
build(){
Column(){
wBuilder.builder({paramA2: this.label.paramA2})
Button('Click me').onClick(() => {
this.label.paramA2 = 'ArkUI';
})
}
}
}
错误场景
wrapBuilder必须传入被@Builder修饰的全局函数。
function MyBuilder() {
}
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%')
}
}
重复定义wrapBuilder失效
通过wrapBuilder(MyBuilderFirst)初始化定义builderObj之后,再次对builderObj进行赋值wrapBuilder(MyBuilderSecond)会不起作用,只生效第一次定义的wrapBuilder(MyBuilderFirst)。
@Builder
function MyBuilderFirst(value: string, size: number) {
Text('MyBuilderFirst:' + value)
.fontSize(size)
}
@Builder
function MyBuilderSecond(value: string, size: number) {
Text('MyBuilderSecond:' + value)
.fontSize(size)
}
interface BuilderModel {
globalBuilder: WrappedBuilder<[string, number]>;
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State builderObj: BuilderModel = { globalBuilder: wrapBuilder(MyBuilderFirst) };
aboutToAppear(): void {
setTimeout(() => {
this.builderObj.globalBuilder = wrapBuilder(MyBuilderSecond);
},1000)
}
build() {
Row() {
Column() {
this.builderObj.globalBuilder.builder(this.message, 20)
}
.width('100%')
}
.height('100%')
}
}
最后
小编在之前的鸿蒙系统扫盲中,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助