1# \@Styles装饰器：定义组件重用样式 2 3 4如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器\@Styles。 5 6 7\@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过\@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。 8 9 10> **说明：** 11> 12> 从API version 9开始，该装饰器支持在ArkTS卡片中使用。 13 14 15## 装饰器使用说明 16 17- 当前\@Styles仅支持[通用属性](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md)和[通用事件](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md)。 18 19- \@Styles方法不支持参数，反例如下。 20 21 ```ts 22 // 反例： @Styles不支持参数 23 @Styles function globalFancy (value: number) { 24 .width(value) 25 } 26 ``` 27 28- \@Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。 29 30> **说明：** 31> 只能在当前文件内使用，不支持export 32 33 ```ts 34 // 全局 35 @Styles function functionName() { ... } 36 37 // 在组件内 38 @Component 39 struct FancyUse { 40 @Styles fancy() { 41 .height(100) 42 } 43 } 44 ``` 45 46- 定义在组件内的\@Styles可以通过this访问组件的常量和状态变量，并可以在\@Styles里通过事件来改变状态变量的值，示例如下： 47 48 ```ts 49 @Component 50 struct FancyUse { 51 @State heightValue: number = 100 52 @Styles fancy() { 53 .height(this.heightValue) 54 .backgroundColor(Color.Yellow) 55 .onClick(() => { 56 this.heightValue = 200 57 }) 58 } 59 } 60 ``` 61 62- 组件内\@Styles的优先级高于全局\@Styles。 63 框架优先找当前组件内的\@Styles，如果找不到，则会全局查找。 64 65 66## 使用场景 67 68以下示例中演示了组件内\@Styles和全局\@Styles的用法。 69 70 71 72```ts 73// 定义在全局的@Styles封装的样式 74@Styles function globalFancy () { 75 .width(150) 76 .height(100) 77 .backgroundColor(Color.Pink) 78} 79 80@Entry 81@Component 82struct FancyUse { 83 @State heightValue: number = 100 84 // 定义在组件内的@Styles封装的样式 85 @Styles fancy() { 86 .width(200) 87 .height(this.heightValue) 88 .backgroundColor(Color.Yellow) 89 .onClick(() => { 90 this.heightValue = 200 91 }) 92 } 93 94 build() { 95 Column({ space: 10 }) { 96 // 使用全局的@Styles封装的样式 97 Text('FancyA') 98 .globalFancy() 99 .fontSize(30) 100 // 使用组件内的@Styles封装的样式 101 Text('FancyB') 102 .fancy() 103 .fontSize(30) 104 } 105 } 106} 107``` 108