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