原文链接:@Styles装饰器:定义组件重用样式
目录标题
- [Q&A] @Styles装饰器作用
- [Q&A] @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)}}
}