ArkTS学习笔记_封装复用之@Styles装饰器
- 背景:
在开发中,如果每个组件的样式都需要单独设置,就会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,给出的思路是:提炼和封装相同的样式成方法,方便复用调用,装饰器@Style孕育而生。 - 作用:
@Styles装饰器可以将多条样式设置,提炼成一个方法,直接在组件使用的位置调用即可复用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。
一、@Styles装饰器使用说明
- 当前@Styles仅支持通用属性和通用事件。
- @Styles方法不支持参数,反例如下。
@Styles function globalFancy (value: number) {.width(value)
}
- @Styles可以定义在组件内或全局。
在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
@Styles function functionName() { ... }
@Component
struct FancyUse {@Styles fancy() {.height(100)}}
- 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值。
@Component
struct FancyUse {@State heightValue: number = 100@Styles fancy() {.height(this.heightValue) .backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200 })}
}
- 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles,如果找不到,则会全局查找。
二、以下示例中演示了组件内@Styles和全局@Styles的用法
@Styles function globalFancy () {.width(150).height(100).backgroundColor(Color.Pink)
}@Entry
@Component
struct FancyUse {@State heightValue: number = 100@Styles fancy() {.width(200).height(this.heightValue).backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200})}build() {Column({ space: 10 }) {Text('FancyA').globalFancy() .fontSize(30)Text('FancyB').fancy() .fontSize(30)}}
}