1# 图标小符号 (SymbolGlyph/SymbolSpan)
2
3SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标和使用动效图标。SymbolSpan作为Text组件的子组件，可在文本中穿插显示图标小符号。具体用法请参考[SymbolGlyph](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md)和[SymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md)组件的文档。
4
5
6## 创建图标
7
8SymbolGlyph通过$r引用Resource资源来创建，目前仅支持系统预置的Symbol资源名。<!--RP1--><!--RP1End-->
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](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#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](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#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](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#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](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#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](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#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](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md#onclick)、[onTouch](../reference/apis-arkui/arkui-ts/ts-universal-events-touch.md#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该示例通过symbolEffect、fontSize、fontColor属性展示了播放列表的效果。
275
276```ts
277// xxx.ets
278@Entry
279@Component
280struct Index {
281  @State triggerValueReplace: number = 0;
282  @State symbolSources: Resource[] =
283    [$r('sys.symbol.repeat'), $r('sys.symbol.repeat_1'), $r('sys.symbol.arrow_left_arrow_right')];
284  @State symbolSourcesIndex: number = 0;
285  @State symbolText: string[] = ['顺序播放', '单曲循环', '随机播放'];
286  @State symbolTextIndex: number = 0;
287  @State fontColorValue: ResourceColor = Color.Grey;
288  @State fontColorValue1: ResourceColor = '#E8E8E8';
289
290  build() {
291    Column({ space: 10 }) {
292      Row() {
293        Text() {
294          Span('当前播放列表')
295            .fontSize(20)
296            .fontWeight(FontWeight.Bolder)
297          Span('（101）')
298        }
299      }
300
301      Row() {
302        Row({ space: 5 }) {
303          SymbolGlyph(this.symbolSources[this.symbolSourcesIndex])
304            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
305            .fontSize(20)
306            .fontColor([this.fontColorValue])
307          Text(this.symbolText[this.symbolTextIndex])
308            .fontColor(this.fontColorValue)
309        }
310        .onClick(() => {
311          this.symbolTextIndex++;
312          this.symbolSourcesIndex++;
313          this.triggerValueReplace++;
314          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
315            this.symbolSourcesIndex = 0;
316            this.triggerValueReplace = 0;
317          }
318          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
319            this.symbolTextIndex = 0;
320          }
321        })
322        .width('75%')
323
324        Row({ space: 5 }) {
325          Text() {
326            SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
327              .fontColor([this.fontColorValue])
328              .fontSize(20)
329          }
330
331          Text() {
332            SymbolSpan($r('sys.symbol.heart_badge_plus'))
333              .fontColor([this.fontColorValue])
334              .fontSize(20)
335          }
336
337          Text() {
338            SymbolSpan($r('sys.symbol.ohos_trash'))
339              .fontColor([this.fontColorValue])
340              .fontSize(20)
341          }
342        }
343        .width('25%')
344      }
345
346      Divider().width(5).color(this.fontColorValue1).width('98%')
347      Row() {
348        Row() {
349          Text("歌曲一")
350        }.width('82%')
351
352        Row({ space: 5 }) {
353          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
354            .fontColor([this.fontColorValue])
355            .fontSize(20)
356          SymbolGlyph($r('sys.symbol.trash'))
357            .fontColor([this.fontColorValue])
358            .fontSize(20)
359        }
360      }
361
362      Divider().width(5).color(this.fontColorValue1).width('98%')
363      Row() {
364        Row() {
365          Text("歌曲二")
366        }.width('82%')
367
368        Row({ space: 5 }) {
369          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
370            .fontColor([this.fontColorValue])
371            .fontSize(20)
372          SymbolGlyph($r('sys.symbol.trash'))
373            .fontColor([this.fontColorValue])
374            .fontSize(20)
375        }
376      }
377
378      Divider().width(5).color(this.fontColorValue1).width('98%')
379      Row() {
380        Row() {
381          Text("歌曲三")
382        }.width('82%')
383
384        Row({ space: 5 }) {
385          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
386            .fontColor([this.fontColorValue])
387            .fontSize(20)
388          SymbolGlyph($r('sys.symbol.trash'))
389            .fontColor([this.fontColorValue])
390            .fontSize(20)
391        }
392      }
393
394      Divider().width(5).color(this.fontColorValue1).width('98%')
395      Row() {
396        Row() {
397          Text("歌曲四")
398        }.width('82%')
399
400        Row({ space: 5 }) {
401          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
402            .fontColor([this.fontColorValue])
403            .fontSize(20)
404          SymbolGlyph($r('sys.symbol.trash'))
405            .fontColor([this.fontColorValue])
406            .fontSize(20)
407        }
408      }
409
410      Divider().width(5).color(this.fontColorValue1).width('98%')
411      Row() {
412        Row() {
413          Text("歌曲五")
414        }.width('82%')
415
416        Row({ space: 5 }) {
417          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
418            .fontColor([this.fontColorValue])
419            .fontSize(20)
420          SymbolGlyph($r('sys.symbol.trash'))
421            .fontColor([this.fontColorValue])
422            .fontSize(20)
423        }
424      }
425
426      Divider().width(5).color(this.fontColorValue1).width('98%')
427      Row() {
428        Row() {
429          Text("歌曲六")
430        }.width('82%')
431
432        Row({ space: 5 }) {
433          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
434            .fontColor([this.fontColorValue])
435            .fontSize(20)
436          SymbolGlyph($r('sys.symbol.trash'))
437            .fontColor([this.fontColorValue])
438            .fontSize(20)
439        }
440      }
441
442      Divider().width(5).color(this.fontColorValue1).width('98%')
443      Row() {
444        Row() {
445          Text("歌曲七")
446        }.width('82%')
447
448        Row({ space: 5 }) {
449          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
450            .fontColor([this.fontColorValue])
451            .fontSize(20)
452          SymbolGlyph($r('sys.symbol.trash'))
453            .fontColor([this.fontColorValue])
454            .fontSize(20)
455        }
456      }
457
458      Divider().width(5).color(this.fontColorValue1).width('98%')
459      Column() {
460        Text("关闭")
461      }
462      .alignItems(HorizontalAlign.Center)
463      .width('98%')
464    }
465    .alignItems(HorizontalAlign.Start)
466    .width('100%')
467    .height(400)
468    .padding({
469      left: 10,
470      top: 10
471    })
472  }
473}
474```
475![symbol_scene_demo](figures/symbol_music_demo.gif)
476