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"应用下找到。
- 利用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的颜色。
- 利用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的颜色。
- 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三者之一。
- 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三者之一，代表单色、多色、分层的渲染效果。
- 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三者之一，代表无动效、整体缩放动效、层级动效的渲染效果。
- 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 原生应用开发入门》（清华大学出版社）
