原文链接:@Styles装饰器:定义组件重用样式
[Q&A] @Styles装饰器作用
@Styles 表示公共样式,每个组件都可以复用。如果相同样式在各个组件里复制一遍,会造成代码冗余,难管理。
[Q&A] @Styles装饰器特点
1・当前@Styles
仅支持通用属性
和通用事件
。
2・@Styles
方法不支持参数
3・@Styles
可以定义在组件内或全局,全局定义时需在方法名前添加function
关键字,组件内定义时则不需添加function
关键字。
使用场景
// 定义在全局的@Styles封装的样式
@Styles
function globalFancy () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
@Entry
@Component
struct FancyUse {
@State heightValue: number = 100
// 定义在组件内的@Styles封装的样式
@Styles
fancy() {
.width(200)
.height(this.heightValue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightValue = 200
})
}
build() {
Column({ space: 10 }) {
Text('FancyA')
.globalFancy() // 使用全局的@Styles封装的样式
.fontSize(30)
Text('FancyB')
.fancy() // 使用组件内的@Styles封装的样式
.fontSize(30)
}
}
}