@BuilderParam就是自定义的组件允许外部传递UI
1.单个@BuilderParam参数
使用尾随闭包的方式进行传入
- 组件内有且仅有一个使用 @BuilderParam 装饰的属性，即可使用尾随闭包
- 内容直接在 {} 传入即可
注意：
- 此场景下自定义组件不支持使用通用属性。
@Component
struct mybutton {
@Builder
//占位符构建函数，里面的内容可写可不写
IsShow() {
}
@BuilderParam
//() => void表示的是一个函数类型，abc是自己定义的一个名称
abc: () => void = this.IsShow
build() {
Column() {
Text('===================')
//这里的this.abc()是拿来给下面的mybutton()里面的内容占位的
this.abc()
Text('==================')
}.height(300)
.width(300)
.border({
width:10,
color:Color.Black
})
.borderRadius(150)
}
}
@Entry
@Component
struct Index {
build() {
Column() {
mybutton(){
//因为上面已经有this.abc()来给自己占位了，所以这里面的东西就能从主组件进行传入,然后将@BuilderParam修饰的this.abc替代掉
Image($r('app.media.app_icon'))
.width(30)
Text('我的东西')
}
}.width('100%')
.height('100%')
}
}
2.多个@BuilderParam参数
子组件有多个@BuilderParam，必须通过参数的方式来传入
举例：
@Component
struct mySelf {
@Builder
//1.占位符构建函数，里面的内容可写可不写
IsShow() {
Text('占位符')
}
//2.定义三个函数变量，用来占位
@BuilderParam
//() => void表示的是一个函数类型，abc是自己定义的一个名称
a: () => void = this.IsShow
@BuilderParam
b: () => void = this.IsShow
@BuilderParam
c: () => void = this.IsShow
//子组件的内容
build() {
Row() {
//3.调用上面的函数变量
this.a()
this.b()
this.c()
}.backgroundColor(Color.White)
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.padding(20)
}
}
@Entry
@Component
struct Index {
//4.在主界面里面还需要进行@Builder的构建函数
@Builder
a1() {
Text('返回')
.fontSize(30)
}
@Builder
b1() {
Text('首页')
.fontSize(30)
}
@Builder
c1() {
Text('菜单')
.fontSize(30)
}
//父组件的内容
build() {
Row() {
//5.调用子组件
mySelf({
//6.因为在子组件里面以及进行占位，所以这里就可以进行给子组件进行传参。
a:this.a1,
b:this.b1,
c:this.c1
})
}.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
