【HarmonyOS 4.0】@BuilderParam 装饰器
1. @BuilderParam 装饰器[*]@BuilderParam 装饰器用于装饰自界说组件(struct)中的属性，其装饰的属性可作为一个UI布局的占位符，待创建该组件时，可通过参数为其传入详细的内容。
[*]参数必须满足俩个条件：
2.1 参数类型必须是个函数；
2.2 参数必须是个UI布局；
[*]因此这个参数就是 @Builder 方法
[*]https://i-blog.csdnimg.cn/direct/5a583c8db0a8422cbbb54d893b704015.png#pic_center
[*]使用所属自界说组件的自界说构建函数或者全局自界说构建函数，必要在当地初始化@BuilderParam。
@Builder
function GlobalDoNothingBuilder(): void {
}
@BuilderParam stateComp: () => void = GlobalDoNothingBuilder
1.1 代码案例如下：
// 第一个Builder
@Builder
export function imageBuilder() {
Column({ space: 10 }) {
Image($r('app.media.app_icon'))
.width('70%')
.height('70%')
.objectFit(ImageFit.Contain)
Text('@BuilderParam装饰器：引用@Builder函数')
.fontSize(16)
.fontWeight(FontWeight.Bold)
}
}
// 第二个Builder
@Builder
export function textBuilder() {
Column({ space: 10 }) {
Text('@BuilderParam装饰器：引用@Builder函数')
.fontSize(16)
.fontWeight(FontWeight.Bold)
Text('当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。')
.fontSize(14)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(6)
}
}
// 自定义子组件
import { textBuilder } from './TextBuilder'
@Extend(Column)
function columnStyle() {
.width('90%')
.height(180)
.borderRadius(10)
.shadow({ radius: 20 })
.padding(10)
}
@Component
export struct Card {
@BuilderParam content: () => void = textBuilder
build() {
Column({ space: 20 }) {
Column() {
this.content()
}
.columnStyle()
}
}
}
// 父组件
import { imageBuilder } from "./ImageBuilder"
import { textBuilder } from './TextBuilder'
import { Card } from "./Card"
@Entry
@Component
struct Index {
private scroller: Scroller = new Scroller()
build() {
Scroll(this.scroller) {
Column({ space: 20 }) {
Card({ content: imageBuilder })
Card({ content: textBuilder })
Divider()
Card({ content: textBuilder })
Card({ content: imageBuilder })
}
.width('100%')
}
}
}
1.2 如果一个组件只界说一个 @BuilderParam 属性，那么创建该组件时，也可直接通过“子组件”的方式传入详细的UI布局。
// 子组件
@Extend(Column)
function columnStyle() {
.width('90%')
.height(180)
.borderRadius(10)
.shadow({ radius: 20 })
.padding(10)
}
@Component
export struct Card {
@BuilderParam content: () => void
build() {
Column({ space: 20 }) {
Column() {
this.content()
}
.columnStyle()
}
}
}
// 父组件
import { Card } from "./Card"
@Entry
@Component
struct Index {
build() {
Column({ space: 20 }) {
Card() {
Column({ space: 10 }) {
Image($r('app.media.app_icon'))
.width('70%')
.height('70%')
.objectFit(ImageFit.Contain)
Text('@BuilderParam装饰器：引用@Builder函数')
.fontSize(16)
.fontWeight(FontWeight.Bold)
}
}
}
.height('100%')
.width('100%')
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]