• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 图标小符号 (SymbolGlyph/SymbolSpan)
2
3SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标。具体用法请参考[SymbolGlyph](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md)。
4
5
6## 创建图标
7
8SymbolGlyph通过引用Resource资源来创建，资源引用类型可以通过$r创建Resource类型对象。
9
10  ```ts
11  SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
12      .fontSize(96)
13      .renderingStrategy(SymbolRenderingStrategy.SINGLE)
14      .fontColor([Color.Black, Color.Green, Color.White])
15  ```
16  ![symbol_folder_badge_plus](figures/symbol_ohos_folder_badge_plus.png)
17
18
19## 添加到文本中
20
21[SymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md)能作为[Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md)的子组件显示图标小符号。可以在一个Text内添加多个SymbolSpan来显示一串图标。
22
23- 创建SymbolSpan。
24
25  SymbolSpan组件需要写到Text组件内，单独的SymbolSpan组件不会显示。
26
27
28  ```ts
29  Text() {
30    SymbolSpan($r('sys.symbol.ohos_trash'))
31      .fontWeight(FontWeight.Normal)
32      .fontSize(96)
33  }
34  ```
35  ![symbol_trash](figures/symbolspan_trash.png)
36
37
38- 通过fontSize属性设置SymbolSpan的大小。
39
40
41  ```ts
42  Row() {
43    Column() {
44      Text("48")
45      Text() {
46        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
47          .fontSize(48)
48          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
49          .fontColor([Color.Black, Color.Green, Color.White])
50      }
51    }
52
53    Column() {
54      Text("72")
55      Text() {
56        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
57          .fontSize(72)
58          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
59          .fontColor([Color.Black, Color.Green, Color.White])
60      }
61    }
62
63    Column() {
64      Text("96")
65      Text() {
66        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
67          .fontSize(96)
68          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
69          .fontColor([Color.Black, Color.Green, Color.White])
70      }
71    }
72  }
73  ```
74  ![symbolSpan_multi_fontSize](figures/symbolspan_multi_fontsize.png)
75
76- 通过fontWeight属性设置SymbolSpan组件的粗细。
77
78  ```ts
79  Row() {
80    Column() {
81      Text("Light")
82      Text() {
83        SymbolSpan($r('sys.symbol.ohos_trash'))
84        .fontWeight(FontWeight.Lighter)
85        .fontSize(96)
86      }
87    }
88
89    Column() {
90      Text("Normal")
91      Text() {
92        SymbolSpan($r('sys.symbol.ohos_trash'))
93          .fontWeight(FontWeight.Normal)
94          .fontSize(96)
95      }
96    }
97
98    Column() {
99      Text("Bold")
100      Text() {
101        SymbolSpan($r('sys.symbol.ohos_trash'))
102          .fontWeight(FontWeight.Bold)
103          .fontSize(96)
104      }
105    }
106  }
107  ```
108  ![symbolSpan_multi_fontWeight_trash](figures/symbol_multi_fontweight_trash.png)
109
110- 通过fontColor属性设置SymbolSpan的颜色。
111
112  ```ts
113  Row() {
114    Column() {
115      Text("Black")
116      Text() {
117          SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
118            .fontSize(96)
119            .fontColor([Color.Black])
120      }
121    }
122
123    Column() {
124      Text("Green")
125      Text() {
126        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
127          .fontSize(96)
128          .fontColor([Color.Green])
129      }
130    }
131
132    Column() {
133      Text("Pink")
134      Text() {
135        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
136          .fontSize(96)
137          .fontColor([Color.Pink])
138      }
139    }
140  }
141  ```
142  ![symbolSpan_multi_fontColor](figures/symbolspan_multi_fontcolor.PNG)
143
144- 通过renderingStrategy属性设置SymbolSpan的渲染策略。
145
146  ```ts
147  Row() {
148    Column() {
149      Text("单色")
150      Text() {
151        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
152          .fontSize(96)
153          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
154          .fontColor([Color.Black, Color.Green, Color.White])
155      }
156    }
157
158    Column() {
159      Text("多色")
160      Text() {
161        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
162          .fontSize(96)
163          .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
164          .fontColor([Color.Black, Color.Green, Color.White])
165      }
166    }
167
168    Column() {
169      Text("分层")
170      Text() {
171        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
172          .fontSize(96)
173          .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
174          .fontColor([Color.Black, Color.Green, Color.White])
175      }
176    }
177  }
178  ```
179  ![symbolSpan_multi_renderingStrategy](figures/symbolspan_multi_renderingStrategy.png)
180
181- 通过effectStrategy属性设置SymbolSpan的动效策略。
182
183  ```ts
184  Row() {
185    Column() {
186      Text("无动效")
187      Text() {
188        SymbolSpan($r('sys.symbol.ohos_wifi'))
189          .fontSize(96)
190          .effectStrategy(SymbolEffectStrategy.NONE)
191      }
192    }
193
194    Column() {
195      Text("整体缩放动效")
196      Text() {
197        SymbolSpan($r('sys.symbol.ohos_wifi'))
198          .fontSize(96)
199          .effectStrategy(SymbolEffectStrategy.SCALE)
200      }
201    }
202
203    Column() {
204      Text("层级动效")
205      Text() {
206        SymbolSpan($r('sys.symbol.ohos_wifi'))
207          .fontSize(96)
208          .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
209      }
210    }
211  }
212  ```
213  ![symbolSpan_multi_effectStrategy](figures/symbolspan_multi_effectStrategy.gif)
214
215- SymbolSpan不支持通用事件。
216
217## 自定义图标动效
218
219相较于effectStrategy属性启动即触发动效，可以通过以下两种方式控制动效的播放状态以及更多样的动效策略选择。
220
221关于effectStrategy属性与symbolEffect属性多种动态属性使用生效原则，详见[SymbolGlyph.symbolEffect属性说明](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md#symboleffect12-1)。
222
223- 通过symbolEffect属性同时设置SymbolGlyph的动效策略及动效播放状态。
224
225  ```ts
226  @State isActive: boolean = true;
227  Column() {
228    Text("可变颜色动效")
229    SymbolGlyph($r('sys.symbol.ohos_wifi'))
230      .fontSize(96)
231      .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)
232    Button(this.isActive ? '关闭' : '播放').onClick(() => {
233      this.isActive = !this.isActive;
234    })
235  }
236  ```
237  ![symbolGlyph_symbolEffect_isActive](figures/symbolGlyph_symbolEffect_isActive.gif)
238
239- 通过symbolEffect属性同时设置SymbolGlyph的动效策略及播放触发器。
240
241  ```ts
242  @State triggerValueReplace: number = 0;
243  Column() {
244    Text("弹跳动效")
245    SymbolGlyph($r('sys.symbol.ellipsis_message_1'))
246      .fontSize(96)
247      .fontColor([Color.Gray])
248      .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.triggerValueReplace)
249    Button('trigger').onClick(() => {
250      this.triggerValueReplace = this.triggerValueReplace + 1;
251    })
252  }
253  ```
254  ![BounceSymbolEffect](figures/symbolGlyph_bounceSymbolEffect_trigger.gif)
255
256
257## 添加事件
258
259SymbolGlyph组件可以添加通用事件，例如绑定onClick、onTouch等事件来响应操作。
260
261```ts
262@State wifiColor: ResourceColor = Color.Black;
263SymbolGlyph($r('sys.symbol.ohos_wifi'))
264.fontSize(96)
265.fontColor([this.wifiColor])
266.onClick(()=>{
267  this.wifiColor = Color.Gray
268})
269```
270![symbolGlyph_onClick](figures/symbolGlyph_onClick.gif)
271
272## 场景示例
273
274
275```ts
276// xxx.ets
277@Entry
278@Component
279struct Index {
280  @State triggerValueReplace: number = 0;
281  @State symbolSources: Resource[] = [$r('sys.symbol.repeat'), $r('sys.symbol.repeat_1'), $r('sys.symbol.arrow_left_arrow_right')]
282  @State symbolSourcesIndex: number = 0;
283  @State symbolText: string[] = ['顺序播放', '单曲循环', '随机播放']
284  @State symbolTextIndex: number = 0;
285  @State fontColorValue:ResourceColor = Color.Grey;
286  @State fontColorValue1:ResourceColor = '#E8E8E8';
287
288  build() {
289    Column( { space: 10 }) {
290      Row() {
291        Text(){
292          Span('当前播放列表')
293            .fontSize(20)
294            .fontWeight(FontWeight.Bolder)
295          Span('（101）')
296        }
297      }
298      Row() {
299        Row({ space: 5 }) {
300          SymbolGlyph(this.symbolSources[this.symbolSourcesIndex])
301            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
302            .fontSize(20)
303            .fontColor([this.fontColorValue])
304          Text(this.symbolText[this.symbolTextIndex])
305            .fontColor(this.fontColorValue)
306        }
307        .onClick(()=>{
308          this.symbolTextIndex++;
309          this.symbolSourcesIndex++;
310          this.triggerValueReplace++;
311          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
312            this.symbolSourcesIndex = 0;
313            this.triggerValueReplace = 0;
314          }
315          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
316            this.symbolTextIndex = 0;
317          }
318        })
319        .width('75%')
320
321        Row({ space: 5 }) {
322          Text(){
323            SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
324              .fontColor([this.fontColorValue])
325              .fontSize(20)
326          }
327          Text(){
328            SymbolSpan($r('sys.symbol.heart_badge_plus'))
329              .fontColor([this.fontColorValue])
330              .fontSize(20)
331          }
332          Text(){
333            SymbolSpan($r('sys.symbol.ohos_trash'))
334              .fontColor([this.fontColorValue])
335              .fontSize(20)
336          }
337        }
338        .width('25%')
339      }
340      Divider().width(5).color(this.fontColorValue1).width('98%')
341      Row(){
342        Row(){
343          Text("歌曲一")
344        }.width('82%')
345        Row({ space: 5}) {
346          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
347            .fontColor([this.fontColorValue])
348            .fontSize(20)
349          SymbolGlyph($r('sys.symbol.trash'))
350            .fontColor([this.fontColorValue])
351            .fontSize(20)
352        }
353      }
354      Divider().width(5).color(this.fontColorValue1).width('98%')
355      Row(){
356        Row(){
357          Text("歌曲二")
358        }.width('82%')
359        Row({ space: 5}) {
360          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
361            .fontColor([this.fontColorValue])
362            .fontSize(20)
363          SymbolGlyph($r('sys.symbol.trash'))
364            .fontColor([this.fontColorValue])
365            .fontSize(20)
366        }
367      }
368      Divider().width(5).color(this.fontColorValue1).width('98%')
369      Row(){
370        Row(){
371          Text("歌曲三")
372        }.width('82%')
373        Row({ space: 5}) {
374          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
375            .fontColor([this.fontColorValue])
376            .fontSize(20)
377          SymbolGlyph($r('sys.symbol.trash'))
378            .fontColor([this.fontColorValue])
379            .fontSize(20)
380        }
381      }
382      Divider().width(5).color(this.fontColorValue1).width('98%')
383      Row(){
384        Row(){
385          Text("歌曲四")
386        }.width('82%')
387        Row({ space: 5}) {
388          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
389            .fontColor([this.fontColorValue])
390            .fontSize(20)
391          SymbolGlyph($r('sys.symbol.trash'))
392            .fontColor([this.fontColorValue])
393            .fontSize(20)
394        }
395      }
396      Divider().width(5).color(this.fontColorValue1).width('98%')
397      Row(){
398        Row(){
399          Text("歌曲五")
400        }.width('82%')
401        Row({ space: 5}) {
402          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
403            .fontColor([this.fontColorValue])
404            .fontSize(20)
405          SymbolGlyph($r('sys.symbol.trash'))
406            .fontColor([this.fontColorValue])
407            .fontSize(20)
408        }
409      }
410      Divider().width(5).color(this.fontColorValue1).width('98%')
411      Row(){
412        Row(){
413          Text("歌曲六")
414        }.width('82%')
415        Row({ space: 5}) {
416          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
417            .fontColor([this.fontColorValue])
418            .fontSize(20)
419          SymbolGlyph($r('sys.symbol.trash'))
420            .fontColor([this.fontColorValue])
421            .fontSize(20)
422        }
423      }
424      Divider().width(5).color(this.fontColorValue1).width('98%')
425      Row(){
426        Row(){
427          Text("歌曲七")
428        }.width('82%')
429        Row({ space: 5}) {
430          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
431            .fontColor([this.fontColorValue])
432            .fontSize(20)
433          SymbolGlyph($r('sys.symbol.trash'))
434            .fontColor([this.fontColorValue])
435            .fontSize(20)
436        }
437      }
438      Divider().width(5).color(this.fontColorValue1).width('98%')
439      Column(){
440        Text("关闭")
441      }
442      .alignItems(HorizontalAlign.Center)
443      .width('98%')
444    }
445    .alignItems(HorizontalAlign.Start)
446    .width('100%')
447    .height(400)
448    .padding({
449      left:10,
450      top:10
451    })
452  }
453}
454```
455![symbol_scene_demo](figures/symbol_music_demo.gif)
456