• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Styles装饰器：定义组件重用样式
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @BlYynNe-->
5<!--SE: @lixingchi1-->
6<!--TSE: @TerryTsao-->
7
8如果每个组件的样式都需要单独设置，在开发过程中会出现大量代码在进行重复样式设置，虽然可以复制粘贴，但为了代码简洁性和后续方便维护，我们推出了可以提炼公共样式进行复用的装饰器\@Styles。
9
10\@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过\@Styles装饰器可以快速定义并复用自定义样式。
11
12> **说明：**
13>
14> 从API version 9开始，该装饰器支持在ArkTS卡片中使用。
15>
16> 从API version 11开始，该装饰器支持在原子化服务中使用。
17
18## 装饰器使用说明
19
20- 当前\@Styles仅支持[通用属性](../../reference/apis-arkui/arkui-ts/ts-component-general-attributes.md)和[通用事件](../../reference/apis-arkui/arkui-ts/ts-component-general-events.md)。
21
22- \@Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。请参考用例[组件内styles和全局styles的用法](#组件内styles和全局styles的用法)。
23
24- 组件内\@Styles的优先级高于全局\@Styles。框架优先找当前组件内的\@Styles，如果找不到，则会全局查找。
25
26> **说明：**
27>
28> 只能在当前文件内使用@Styles，不支持export。
29>
30> 若需要实现样式导出，推荐使用[AttributeModifier](../../ui/arkts-user-defined-extension-attributeModifier.md)。
31
32
33定义在组件内的\@Styles可以通过this访问组件的常量和状态变量，并可以在\@Styles里通过事件来改变状态变量的值，示例如下：
34
35```ts
36@Entry
37@Component
38struct FancyUse {
39  @State heightValue: number = 50;
40
41  @Styles
42  fancy() {
43    .height(this.heightValue)
44    .backgroundColor(Color.Blue)
45    .onClick(() => {
46      this.heightValue = 100;
47    })
48  }
49
50  build() {
51    Column() {
52      Button('change height')
53        .fancy()
54    }
55    .height('100%')
56    .width('100%')
57  }
58}
59```
60
61## 限制条件
62
63- \@Styles方法不能有参数，编译期会报错，表明@Styles方法不支持参数。
64
65```ts
66// 错误写法： @Styles不支持参数，编译期报错
67@Styles
68function globalFancy (value: number) {
69  .width(value)
70}
71
72// 正确写法
73@Styles
74function globalFancy () {
75  .width(100)
76}
77```
78
79- 不支持在\@Styles方法内使用逻辑组件，逻辑组件内的属性不生效。
80
81```ts
82// 错误写法
83@Styles
84function backgroundColorStyle() {
85  if (true) {
86    .backgroundColor(Color.Red)
87  }
88}
89
90// 正确写法
91@Styles
92function backgroundColorStyle() {
93  .backgroundColor(Color.Red)
94}
95```
96
97## 使用场景
98
99### 组件内\@Styles和全局\@Styles的用法
100
101```ts
102// 定义在全局的@Styles封装的样式
103@Styles
104function globalFancy () {
105  .width(150)
106  .height(100)
107  .backgroundColor(Color.Pink)
108}
109
110@Entry
111@Component
112struct FancyUse {
113  @State heightValue: number = 100;
114  // 定义在组件内的@Styles封装的样式
115  @Styles fancy() {
116    .width(200)
117    .height(this.heightValue)
118    .backgroundColor(Color.Yellow)
119    .onClick(() => {
120      this.heightValue = 200;
121    })
122  }
123
124  build() {
125    Column({ space: 10 }) {
126      // 使用全局的@Styles封装的样式
127      Text('FancyA')
128        .globalFancy()
129        .fontSize(30)
130      // 使用组件内的@Styles封装的样式
131      Text('FancyB')
132        .fancy()
133        .fontSize(30)
134    }
135  }
136}
137```