• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Extend装饰器：定义扩展组件样式
2
3
4在前文的示例中，可以使用[\@Styles](arkts-style.md)用于样式的重用，在\@Styles的基础上，我们提供了\@Extend，用于扩展原生组件样式。
5
6
7> **说明：**
8>
9> 从API version 9开始，该装饰器支持在ArkTS卡片中使用。
10>
11> 从API version 11开始，该装饰器支持在原子化服务中使用。
12
13## 装饰器使用说明
14
15
16### 语法
17
18
19```ts
20@Extend(UIComponentName) function functionName { ... }
21```
22
23
24### 使用规则
25
26- 和\@Styles不同，\@Extend仅支持在全局定义，不支持在组件内部定义。
27
28> **说明：**
29>
30> 只能在当前文件内使用，不支持export
31>
32> 如果想实现export功能，推荐使用[AttributeModifier](../ui/arkts-user-defined-extension-attributeModifier.md)
33
34- 和\@Styles不同，\@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
35
36  ```ts
37  // @Extend(Text)可以支持Text的私有属性fontColor
38  @Extend(Text) function fancy () {
39    .fontColor(Color.Red)
40  }
41  // superFancyText可以调用预定义的fancy
42  @Extend(Text) function superFancyText(size:number) {
43      .fontSize(size)
44      .fancy()
45  }
46  ```
47
48
49- 和\@Styles不同，\@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
50
51  ```ts
52  // xxx.ets
53  @Extend(Text) function fancy (fontSize: number) {
54    .fontColor(Color.Red)
55    .fontSize(fontSize)
56  }
57
58  @Entry
59  @Component
60  struct FancyUse {
61    build() {
62      Row({ space: 10 }) {
63        Text('Fancy')
64          .fancy(16)
65        Text('Fancy')
66          .fancy(24)
67      }
68    }
69  }
70  ```
71
72- \@Extend装饰的方法的参数可以为function，作为Event事件的句柄。
73
74  ```ts
75  @Extend(Text) function makeMeClick(onClick: () => void) {
76    .backgroundColor(Color.Blue)
77    .onClick(onClick)
78  }
79
80  @Entry
81  @Component
82  struct FancyUse {
83    @State label: string = 'Hello World';
84
85    onClickHandler() {
86      this.label = 'Hello ArkUI';
87    }
88
89    build() {
90      Row({ space: 10 }) {
91        Text(`${this.label}`)
92          .makeMeClick(() => {this.onClickHandler()})
93      }
94    }
95  }
96  ```
97
98- \@Extend的参数可以为[状态变量](arkts-state-management-overview.md)，当状态变量改变时，UI可以正常的被刷新渲染。
99
100  ```ts
101  @Extend(Text) function fancy (fontSize: number) {
102    .fontColor(Color.Red)
103    .fontSize(fontSize)
104  }
105
106  @Entry
107  @Component
108  struct FancyUse {
109    @State fontSizeValue: number = 20
110    build() {
111      Row({ space: 10 }) {
112        Text('Fancy')
113          .fancy(this.fontSizeValue)
114          .onClick(() => {
115            this.fontSizeValue = 30
116          })
117      }
118    }
119  }
120  ```
121
122
123## 使用场景
124
125以下示例声明了3个Text组件，每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。
126
127
128```ts
129@Entry
130@Component
131struct FancyUse {
132  @State label: string = 'Hello World'
133
134  build() {
135    Row({ space: 10 }) {
136      Text(`${this.label}`)
137        .fontStyle(FontStyle.Italic)
138        .fontWeight(100)
139        .backgroundColor(Color.Blue)
140      Text(`${this.label}`)
141        .fontStyle(FontStyle.Italic)
142        .fontWeight(200)
143        .backgroundColor(Color.Pink)
144      Text(`${this.label}`)
145        .fontStyle(FontStyle.Italic)
146        .fontWeight(300)
147        .backgroundColor(Color.Orange)
148    }.margin('20%')
149  }
150}
151```
152
153\@Extend将样式组合复用，示例如下。
154
155
156```ts
157@Extend(Text) function fancyText(weightValue: number, color: Color) {
158  .fontStyle(FontStyle.Italic)
159  .fontWeight(weightValue)
160  .backgroundColor(color)
161}
162```
163
164通过\@Extend组合样式后，使得代码更加简洁，增强可读性。
165
166
167```ts
168@Entry
169@Component
170struct FancyUse {
171  @State label: string = 'Hello World'
172
173  build() {
174    Row({ space: 10 }) {
175      Text(`${this.label}`)
176        .fancyText(100, Color.Blue)
177      Text(`${this.label}`)
178        .fancyText(200, Color.Pink)
179      Text(`${this.label}`)
180        .fancyText(300, Color.Orange)
181    }.margin('20%')
182  }
183}
184```
185