当前位置：首页 > news >正文

ArkTS学习笔记_封装复用之@Styles装饰器

news 2025/7/7 7:36:03

ArkTS学习笔记_封装复用之@Styles装饰器

背景：
在开发中，如果每个组件的样式都需要单独设置，就会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，给出的思路是：提炼和封装相同的样式成方法，方便复用调用，装饰器@Style孕育而生。
作用:
@Styles装饰器可以将多条样式设置，提炼成一个方法，直接在组件使用的位置调用即可复用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

一、@Styles装饰器使用说明

当前@Styles仅支持通用属性和通用事件。
@Styles方法不支持参数，反例如下。

// 反例： @Styles不支持参数
@Styles function globalFancy (value: number) {.width(value)
}

@Styles可以定义在组件内或全局。
在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。

// 全局，前面添加function关键字
@Styles function functionName() { ... }// 在组件内
@Component
struct FancyUse {// 组件内部，不需要添加function关键字  @Styles fancy() {.height(100)}}

定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值。

@Component
struct FancyUse {@State heightValue: number = 100@Styles fancy() {.height(this.heightValue) // 可是使用this指向组件本身，调用组件的状态 .backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200 // 可是使用this指向组件本身，给组件的状态赋值 })}
}

组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

二、以下示例中演示了组件内@Styles和全局@Styles的用法

// 定义在全局的@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)}}
}