花都营销网站建设,嘉兴网站建设科技有限公司,网站开发技术方案与实施,电商平台网页制作前言#xff1a;
前面我们认识了Builder装饰器#xff1a;自定义构建函数#xff0c;今天我们继续认识下一个装饰器——BuilderParam装饰器。
当开发者创建了自定义组件#xff0c;并想对该组件添加特定功能时#xff0c;例如在自定义组件中添加一个点击跳转操作。若直接…前言
前面我们认识了Builder装饰器自定义构建函数今天我们继续认识下一个装饰器——BuilderParam装饰器。
当开发者创建了自定义组件并想对该组件添加特定功能时例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题ArkUI引入了BuilderParam装饰器BuilderParam用来装饰指向Builder方法的变量开发者可在初始化自定义组件时对此属性进行赋值为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素类似slot占位符。 注意⚠️从API version 9开始该装饰器支持在ArkTS卡片中使用。 BuilderParam装饰器的使用说明
BuildParam装饰的方法只能被自定义构建函数Builder装饰的方法初始化。
使用所属自定义组件的自定义构建函数或者全局的自定义构建函数在本地初始化BuilderParam。
Builder function GlobalBuilder0() {}Component
struct Child {Builder doNothingBuilder() {};BuilderParam aBuilder0: () void this.doNothingBuilder;BuilderParam aBuilder1: () void GlobalBuilder0;build(){}
}用父组件自定义构建函数初始化子组件BuildParam装饰的方法。
Component
struct Child {BuilderParam aBuilder0: () void;build() {Column() {this.aBuilder0()}}
}Entry
Component
struct Parent {Builder componentBuilder() {Text(Parent builder )}build() {Column() {Child({ aBuilder0: this.componentBuilder })}}
}需注意this指向正确。 以下示例中Parent组件在调用this.componentBuilder()时this.label指向其所属组件即“Parent”。Builder componentBuilder()传给子组件BuilderParam aBuilder0在Child组件中调用this.aBuilder0()时this.label指向在Child的label即“Child”。
Component
struct Child {label: string ChildBuilderParam aBuilder0: () void;build() {Column() {this.aBuilder0()}}
}Entry
Component
struct Parent {label: string ParentBuilder componentBuilder() {Text(${this.label})}build() {Column() {this.componentBuilder()Child({ aBuilder0: this.componentBuilder })}}
}注意⚠️开发者谨慎使用bind改变函数调用的上下文可能会使this指向混乱。 BuilderParam装饰器的使用场景
1:参数初始化组件
BuilderParam装饰的方法可以是有参数和无参数的两种形式需与指向的Builder方法类型匹配。BuilderParam装饰的方法类型需要和Builder方法类型一致。
举个列子
Builder function GlobalBuilder1($$ : {label: string }) {Text($$.label).width(400).height(50).backgroundColor(Color.Blue)
}Component
struct Child {label: string Child// 无参数类指向的componentBuilder也是无参数类型BuilderParam aBuilder0: () void;// 有参数类型指向的GlobalBuilder1也是有参数类型的方法BuilderParam aBuilder1: ($$ : { label : string}) void;build() {Column() {this.aBuilder0()this.aBuilder1({label: global Builder label } )}}
}Entry
Component
struct Parent {label: string ParentBuilder componentBuilder() {Text(${this.label})}build() {Column() {this.componentBuilder()Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })}}
}2:参数初始化组件
在自定义组件中使用BuilderParam装饰的属性时也可通过尾随闭包进行初始化。在初始化自定义组件时组件后紧跟一个大括号“{}”形成尾随闭包场景。
开发者可以将尾随闭包内的内容看做Builder装饰的函数传给BuilderParam。举个例子
// xxx.ets
Component
struct CustomContainer {Prop header: string;BuilderParam closer: () voidbuild() {Column() {Text(this.header).fontSize(30)this.closer()}}
}Builder function specificParam(label1: string, label2: string) {Column() {Text(label1).fontSize(30)Text(label2).fontSize(30)}
}Entry
Component
struct CustomContainerUser {State text: string header;build() {Column() {// 创建CustomContainer在创建CustomContainer时通过其后紧跟一个大括号“{}”形成尾随闭包// 作为传递给子组件CustomContainer BuilderParam closer: () void的参数CustomContainer({ header: this.text }) {Column() {specificParam(testA, testB)}.backgroundColor(Color.Yellow).onClick(() {this.text changeHeader;})}}}
}注意⚠️此场景下自定义组件内有且仅有一个使用BuilderParam装饰的属性。 总结
BuilderParam用来装饰指向Builder方法的变量开发者可在初始化自定义组件时对此属性进行赋值为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素类似slot占位符。BuildParam装饰的方法只能被自定义构建函数Builder装饰的方法初始化。在参数初始化组件时BuilderParam装饰的方法可以是有参数和无参数的两种形式需与指向的Builder方法类型匹配。BuilderParam装饰的方法类型需要和Builder方法类型一致。在尾随闭包初始化组件时组件后紧跟一个大括号“{}”形成尾随闭包场景。开发者可以将尾随闭包内的内容看做Builder装饰的函数传给BuilderParam。但是注意此场景下自定义组件内有且仅有一个使用BuilderParam装饰的属性。
