diff --git a/zh-cn/application-dev/ui/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md index 13eda212ad9e38a8f362518c3cf50d8356ee2d06..12c4d3854a26909b3c3ccdf8a58f98e63d5059de 100644 --- a/zh-cn/application-dev/ui/ts-component-based-builder.md +++ b/zh-cn/application-dev/ui/ts-component-based-builder.md @@ -44,4 +44,103 @@ struct CompA { .height(2 * this.size) } } + +``` +## @BuilderParam + +@BuilderParam装饰器用于修饰自定义组件内函数类型的属性,并且在创建自定义组件时使用@BuilderParam修饰的属性必须赋值。 + +### 引入动机 + +当开发者在自定义组件内不能对@Builder修饰的方法进行扩展,只能对此方法进行调用。如:只想在某个地方给此方法增加一层Column组件并给它添加一个点击事件,如直接在方法内,或自定义组件内添加会导致所有调用此方法的地方都会改变。为解决此方法引入了@BuilderParam装饰器,此装饰器修饰的属性值可为@Builder修饰的方法,开发者可在创建自定义组件对属性赋值时进拓展操作。 + +### 场景一 +把@Builder自定义方法赋值给@BuilderParam修饰的属性,并在自定义组件内进行调用。 +``` +@Component +struct CustomContainer { + header: string = ""; + footer: string = ""; + @BuilderParam child: () => any; + build() { + Column() { + this.child() + Text(this.header) + .fontSize(50) + Text(this.footer) + .fontSize(50) + } + } +} + +@Entry +@Component +struct CustomContainerUser { + @Builder specificParam(label1: string, label2: string) { + Column() { + Text(label1).fontSize(50) + Text(label2).fontSize(50) + } + } + + build() { + Column() { + CustomContainer({ + header: "Header", + footer: "Footer", + child: this.specificParam("11", "22") + }) + } + } +} + +``` +### 场景二 +在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包的内容,极大拓展了灵活性。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性,并且语法规范与[build](../ui/ts-function-build.md)一致。 + +示例在调用@Builder修饰的方法时在外增加了Column组件,并添加了onClick事件。 + ``` +@Component +struct CustomContainer { + header: string = ""; + footer: string = ""; + @BuilderParam child: () => any; + build() { + Column() { + this.child() + Text(this.header) + .fontSize(50) + Text(this.footer) + .fontSize(50) + } + } +} +@Builder function specificParam(label1: string, label2: string) { + Column() { + Text(label1) + .fontSize(50) + Text(label2) + .fontSize(50) + } +} +@Entry +@Component +struct CustomContainerUser { + build() { + Column() { + CustomContainer({ + header: "Header", + footer: "Footer" + }){ + Column(){ + specificParam("11", "22") + }.onClick(()=>{ + console.log("1111"); + }) + } + } + } +} + +``` \ No newline at end of file