可通过@Builder装饰器进行描述,该装饰器可以修饰一个函数,此函数可以在build函数之外声明,并在build函数中或其他@Builder修饰的函数中使用,从而实现在一个自定义组件内快速生成多个布局内容。
@BuilderParam装饰器用于修饰自定义组件内函数类型的属性(例如: @BuilderParam noParam: () => void
),并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
当开发者在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,引入了@BuilderParam装饰器,此装饰器修饰的属性值可为@Builder装饰的函数,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。
ArkTS为了避免开发者对重复样式的设置,通过@Styles装饰器可以将多个样式设置提炼成一个方法,直接在组件声明时调用,通过@Styles装饰器可以快速定义并复用自定义样式。当前@Styles仅支持通用属性。
@Styles function globalFancy () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
Text('坚果')
.globalFancy()
.fontSize(30)
@Extend装饰器将新的属性方法添加到Text、Column、Button等内置组件上,通过@Extend装饰器可以快速地扩展原生组件。注意的是@Extend不能定义在自定义组件struct内。
// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
.fontStyle(FontStyle.Italic)
.fontWeight(600)
}
Text("坚果")
.fancy(24)
@CustomDialog装饰器用于装饰自定义弹窗组件,使得弹窗可以动态设置内容及样式。
@CustomDialog
struct DialogExample {
controller: CustomDialogController
action: () => void
build() {
Row() {
Button('自定义dialog')
.onClick(() => {
this.controller.close()
this.action()
})
}.padding(20)
}
}
@Entry
@Component
struct AboutPage {
@State message: string = 'Hello World'
dialogController: CustomDialogController = new CustomDialogController({
builder: DialogExample({ action: this.onAccept }),
cancel: this.existDialog,
autoCancel: true
});
onAccept() {
console.info('onAccept');
}
existDialog() {
console.info('Cancel dialog!');
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold) .onClick(() => {
this.dialogController.open()
})
}
.width('100%')
}
.height('100%')
}
}
审核编辑:汤梓红
全部0条评论
快来发表一下你的评论吧 !