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组件使用系统图标的例子。

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

在上述例子中：

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

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

---

SymbolSpan作为Text组件的子组件，可在文本中穿插显示图标小符号。

以下是利用SymbolSpan组件使用系统图标的例子。

// SymbolSpan可作为Text的子组件用于显示图标小符号。 // 可以在一个Text组件内添加多个SymbolSpan，从而展示一串连续的图标。 // 通过fontSize属性设置SymbolSpan的大小。 // 通过fontColor属性设置SymbolSpan的颜色。 Row() { Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(48) .fontColor([Color.Black]) SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(72) .fontColor([Color.Green]) SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .fontColor([Color.Pink]) } } 

在上述例子中：

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

3. fontWeight属性

---

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

// 通过fontWeight属性设置SymbolSpan组件的粗细。 Row() { Column() { Text("Lighter") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Lighter) .fontSize(96) } } Column() { Text("Normal") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Normal) .fontSize(96) } } Column() { Text("Bold") Text() { SymbolSpan($r('sys.symbol.ohos_trash')) .fontWeight(FontWeight.Bold) .fontSize(96) } } } 

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

4. renderingStrategy属性

---

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

// 通过renderingStrategy属性设置SymbolSpan的渲染策略。 Row() { Column() { Text("单色") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.SINGLE) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("多色") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) .fontColor([Color.Black, Color.Green, Color.White]) } } Column() { Text("分层") Text() { SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) .fontSize(96) .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) .fontColor([Color.Black, Color.Green, Color.White]) } } } 

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

5. effectStrategy属性

---

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

// 通过effectStrategy属性设置SymbolSpan的动效策略。 Row() { Column() { Text("无动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.NONE) } } Column() { Text("整体缩放动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.SCALE) } } Column() { Text("层级动效") Text() { SymbolSpan($r('sys.symbol.ohos_wifi')) .fontSize(96) .effectStrategy(SymbolEffectStrategy.HIERARCHICAL) } } } 

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

6. symbolEffect属性

---

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

@State isActive: boolean = true; @State triggerValueReplace: number = 0; // 通过symbolEffect属性设置自定义SymbolGlyph的动效。 Row() { // 通过设置symbolEffect属性，可以同时配置SymbolGlyph的动效策略及其播放状态。 Column() { Text("可变颜色动效") SymbolGlyph($r('sys.symbol.ohos_wifi')) .fontSize(96) .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) Button(this.isActive ? '关闭' : '播放').onClick(() => { this.isActive = !this.isActive; }) } // 通过设置symbolEffect属性，可以同时指定SymbolGlyph的动效策略及其播放触发条件。 Column() { Text("弹跳动效") SymbolGlyph($r('sys.symbol.ellipsis_message_1')) .fontSize(96) .fontColor([Color.Gray]) .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.triggerValueReplace) Button('trigger').onClick(() => { this.triggerValueReplace = this.triggerValueReplace + 1; }) } } 

在上述例子中，通过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 原生应用开发入门》（清华大学出版社）