鸿蒙HarmonyOS使用系统图标 - Powered by Discuz! Archiver

乌市泽哥 发表于 2025-4-8 02:38:40

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图标的资源名称。
https://i-blog.csdnimg.cn/img_convert/b874313b472687503fff355a348bdaeb.png
以下是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()

SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
.fontSize(72)
.fontColor()

SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
.fontSize(96)
.fontColor()
}
在上述例子中：

[*]SymbolGlyph通过$r引用Resource资源来创建，现在仅支持系统预置的Symbol资源名。
[*]通过fontSize属性设置SymbolGlyph的巨细。
[*]通过fontColor属性设置SymbolGlyph的颜色。
https://i-blog.csdnimg.cn/img_convert/d8094eae5a9e0ee690d576a6a1dad107.png
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()

SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
   .fontSize(72)
   .fontColor()

SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
   .fontSize(96)
   .fontColor()
}
}
在上述例子中：

[*]SymbolSpan可作为Text的子组件用于显示图标小符号。可以在一个Text组件内添加多个SymbolSpan，从而展示一勾通续的图标。
[*]通过fontSize属性设置SymbolSpan的巨细。
[*]通过fontColor属性设置SymbolSpan的颜色。
https://i-blog.csdnimg.cn/img_convert/ff02c5baf3a59b0413a5e283a27e63a3.png
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三者之一。
https://i-blog.csdnimg.cn/img_convert/455ce28493469821f93283278d13c60f.png
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()
}
}

Column() {
Text("多色")
Text() {
   SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
   .fontSize(96)
   .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
   .fontColor()
}
}

Column() {
Text("分层")
Text() {
   SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
   .fontSize(96)
   .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
   .fontColor()
}
}
}
在上述例子中，通过renderingStrategy属性设置SymbolSpan的渲染策略，值分别是SINGLE、MULTIPLE_COLOR、MULTIPLE_OPACITY三者之一，代表单色、多色、分层的渲染效果。
https://i-blog.csdnimg.cn/img_convert/3bb4d3c2d10e63137955ffb5624b1e78.png
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三者之一，代表无动效、整体缩放动效、层级动效的渲染效果。
https://i-blog.csdnimg.cn/img_convert/e293573fe1f424f3b5845046808ee7b2.png
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()
   .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.triggerValueReplace)

Button('trigger').onClick(() => {
   this.triggerValueReplace = this.triggerValueReplace + 1;
})
}
}
在上述例子中，通过symbolEffect属性设置SymbolGlyph的自定义动效策略，自定义的类型可以是SymbolEffect的子类，好比HierarchicalSymbolEffect或者BounceSymbolEffect等。
https://i-blog.csdnimg.cn/img_convert/6c44cd02db83c247e1d304fbe023a009.png
以下是相关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 原生应用开发入门》（清华大学出书社）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

HarmonyOS使用系统图标