HarmonyOS使用系统图标

HarmonyOS图标符号是系统内置的一套图标资源库。开发者可以通过图标的资源名称，使用SymbolGlyph和SymbolSpan组件可以高效索引并使用相应的图标。使用HarmonyOS Symbol，开发者不仅可以轻松地通过图标名称引用图标资源，从而简化开发流程。还可以或许确保其应用步调在视觉上与系统的设计风格保持一致，从而提拔用户界面的专业性和准确性。
对于系统资源，可以通过“$r('sys.symbol.resource_name')”的情势访问。此中，sys表现系统资源；symbol为系统图标资源类型；resource_name为资源名称。通过HarmonyOS Symbol图标网站（https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/），可以轻松查看到HarmonyOS Symbol图标的资源名称。

以下是SymbolGlyph组件和SymbolSpan组件使用系统图标的示例。本节示例源码可以在“ArkUISymbolGlyphSymbolSpan”应用下找到。
1. 使用SymbolGlyph组件使用系统图标

SymbolGlyph是图标小符号组件，便于使用精美的图标，如渲染多色图标和使用动效图标。
以下是使用SymbolGlyph组件使用系统图标的例子。

1. // SymbolGlyph通过$r引用Resource资源来创建，目前仅支持系统预置的Symbol资源名。
2. // 通过fontSize属性设置SymbolGlyph的大小。
3. // 通过fontColor属性设置SymbolGlyph的颜色。
4. Row() {
5.   SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
6.     .fontSize(48)
7.     .fontColor([Color.Black])
9.   SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
10.     .fontSize(72)
11.     .fontColor([Color.Green])
13.   SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
14.     .fontSize(96)
15.     .fontColor([Color.Pink])
16. }

复制代码

在上述例子中：

• SymbolGlyph通过$r引用Resource资源来创建，现在仅支持系统预置的Symbol资源名。
  
• 通过fontSize属性设置SymbolGlyph的巨细。
  
• 通过fontColor属性设置SymbolGlyph的颜色。
  

2. 使用SymbolSpan组件使用系统图标

SymbolSpan作为Text组件的子组件，可在文本中穿插显示图标小符号。
以下是使用SymbolSpan组件使用系统图标的例子。

1. // SymbolSpan可作为Text的子组件用于显示图标小符号。
2. // 可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标。
3. // 通过fontSize属性设置SymbolSpan的大小。
4. // 通过fontColor属性设置SymbolSpan的颜色。
5. Row() {
6.   Text() {
7.     SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
8.       .fontSize(48)
9.       .fontColor([Color.Black])
11.     SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
12.       .fontSize(72)
13.       .fontColor([Color.Green])
15.     SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
16.       .fontSize(96)
17.       .fontColor([Color.Pink])
18.   }
19. }

复制代码

在上述例子中：

• SymbolSpan可作为Text的子组件用于显示图标小符号。可以在一个Text组件内添加多个SymbolSpan，从而展示一勾通续的图标。
  
• 通过fontSize属性设置SymbolSpan的巨细。
  
• 通过fontColor属性设置SymbolSpan的颜色。
  

3. fontWeight属性

通过fontWeight属性可以设置SymbolGlyph组件或者SymbolSpan组件的粗细，以下是一个例子。

1. // 通过fontWeight属性设置SymbolSpan组件的粗细。
2. Row() {
3.   Column() {
4.     Text("Lighter")
5.     Text() {
6.       SymbolSpan($r('sys.symbol.ohos_trash'))
7.         .fontWeight(FontWeight.Lighter)
8.         .fontSize(96)
9.     }
10.   }
12.   Column() {
13.     Text("Normal")
14.     Text() {
15.       SymbolSpan($r('sys.symbol.ohos_trash'))
16.         .fontWeight(FontWeight.Normal)
17.         .fontSize(96)
18.     }
19.   }
21.   Column() {
22.     Text("Bold")
23.     Text() {
24.       SymbolSpan($r('sys.symbol.ohos_trash'))
25.         .fontWeight(FontWeight.Bold)
26.         .fontSize(96)
27.     }
28.   }
29. }

复制代码

在上述例子中，通过fontWeight属性设置SymbolSpan的粗细，值分别是Lighter、Normal、Bold三者之一。

4. renderingStrategy属性

通过renderingStrategy属性可以设置SymbolGlyph组件或者SymbolSpan组件的渲染策略，以下是一个例子。

1. // 通过renderingStrategy属性设置SymbolSpan的渲染策略。
2. Row() {
3.   Column() {
4.     Text("单色")
5.     Text() {
6.       SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
7.         .fontSize(96)
8.         .renderingStrategy(SymbolRenderingStrategy.SINGLE)
9.         .fontColor([Color.Black, Color.Green, Color.White])
10.     }
11.   }
13.   Column() {
14.     Text("多色")
15.     Text() {
16.       SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
17.         .fontSize(96)
18.         .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
19.         .fontColor([Color.Black, Color.Green, Color.White])
20.     }
21.   }
23.   Column() {
24.     Text("分层")
25.     Text() {
26.       SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
27.         .fontSize(96)
28.         .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
29.         .fontColor([Color.Black, Color.Green, Color.White])
30.     }
31.   }
32. }

复制代码

在上述例子中，通过renderingStrategy属性设置SymbolSpan的渲染策略，值分别是SINGLE、MULTIPLE_COLOR、MULTIPLE_OPACITY三者之一，代表单色、多色、分层的渲染效果。

5. effectStrategy属性

通过effectStrategy属性可以设置SymbolGlyph组件或者SymbolSpan组件的动效策略，以下是一个例子。

1. // 通过effectStrategy属性设置SymbolSpan的动效策略。
2. Row() {
3.   Column() {
4.     Text("无动效")
5.     Text() {
6.       SymbolSpan($r('sys.symbol.ohos_wifi'))
7.         .fontSize(96)
8.         .effectStrategy(SymbolEffectStrategy.NONE)
9.     }
10.   }
12.   Column() {
13.     Text("整体缩放动效")
14.     Text() {
15.       SymbolSpan($r('sys.symbol.ohos_wifi'))
16.         .fontSize(96)
17.         .effectStrategy(SymbolEffectStrategy.SCALE)
18.     }
19.   }
21.   Column() {
22.     Text("层级动效")
23.     Text() {
24.       SymbolSpan($r('sys.symbol.ohos_wifi'))
25.         .fontSize(96)
26.         .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
27.     }
28.   }
29. }

复制代码

在上述例子中，通过effectStrategy属性设置SymbolSpan的动效策略，值分别是NONE、SCALE、HIERARCHICAL三者之一，代表无动效、整体缩放动效、层级动效的渲染效果。

6. symbolEffect属性

通过symbolEffect属性可以设置SymbolGlyph组件的自定义动效策略，以下是一个例子。

1. @State isActive: boolean = true;
3. @State triggerValueReplace: number = 0;
5. // 通过symbolEffect属性设置自定义SymbolGlyph的动效。
6. Row() {
7.   // 通过设置symbolEffect属性，可以同时配置SymbolGlyph的动效策略及其播放状态。
8.   Column() {
9.     Text("可变颜色动效")
11.     SymbolGlyph($r('sys.symbol.ohos_wifi'))
12.       .fontSize(96)
13.       .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)
15.     Button(this.isActive ? '关闭' : '播放').onClick(() => {
16.       this.isActive = !this.isActive;
17.     })
18.   }
20.   // 通过设置symbolEffect属性，可以同时指定SymbolGlyph的动效策略及其播放触发条件。
21.   Column() {
22.     Text("弹跳动效")
24.     SymbolGlyph($r('sys.symbol.ellipsis_message_1'))
25.       .fontSize(96)
26.       .fontColor([Color.Gray])
27.       .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.triggerValueReplace)
29.     Button('trigger').onClick(() => {
30.       this.triggerValueReplace = this.triggerValueReplace + 1;
31.     })
32.   }
33. }

复制代码

在上述例子中，通过symbolEffect属性设置SymbolGlyph的自定义动效策略，自定义的类型可以是SymbolEffect的子类，好比HierarchicalSymbolEffect或者BounceSymbolEffect等。

以下是相关HarmonyOS应用生态的相关学习资料：

• 《跟老卫学 HarmonyOS 开发》 开源免费教程，https://github.com/waylau/harmonyos-tutorial
  
• 《鸿蒙 HarmonyOS 手机应用开发实战》（清华大学出书社）
  
• “鸿蒙系统实战短视频 App 从 0 到 1 把握 HarmonyOS”（https://coding.imooc.com/class/674.html）
  
• 《鸿蒙 HarmonyOS 应用开发入门》（清华大学出书社）
  
• “2024 鸿蒙零基础快速实战 - 仿抖音 App 开发（ArkTS 版）”（https://coding.imooc.com/class/843.html）
  
• 《鸿蒙 HarmonyOS 应用开发从入门到精通战（第 2 版）》（北京大学出书社）
  
• 《鸿蒙之光 HarmonyOS NEXT 原生应用开发入门》（清华大学出书社）