当前位置： 首页 > news >正文

HarmonyOS 鸿蒙系统自带的 SymbolGlyph 图标组件详解

news 2025/9/7 7:48:00

还在到处的找图标？先来看看系统带的两千多个是否满足。在 HarmonyOS 的应用开发中，SymbolGlyph 是一个非常实用的组件，用于显示系统预置的小图标符号。它不仅支持手机、平板、手表等多种设备，还兼容 ArkTS 卡片和元服务，从API 11开始就已经被引入，并且在API 12及其之后的版本中增加了更多功能，如颜色控制、动效和高级渲染策略等。

这些特性让开发者无需再为UI设计资源而烦恼，涵盖了常用的icon图标资源。同时也能确保开发出的应用与原生鸿蒙风格保持一致。

官方图标库网站：

  • HarmonyOS Symbol 主题图标库：
  • https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/

在这里插入图片描述

官方文档上介绍了两千多种，但是还是不完整。以下为网友总结的所有图标示例：

开源图标库：

  • https://gitee.com/awa_Liny/Linys_Ani_Examples_NEXT
  • https://github.com/awaLiny2333/Linys_Ani_Examples_NEXT

1. SymbolGlyph 基本介绍和接口

SymbolGlyph 组件通过构造函数接受一个指定的图标资源，该资源必须是系统预置的 symbol 资源，例如 $r('sys.symbol.ohos_wifi')，而不是自定义资源。如果使用不正确的资源，图标将无法正确显示。此外，SymbolGlyph 不支持子组件，也就是说你不能将其他组件嵌入到 SymbolGlyph 中来。

代码示例：

// 创建一个Wi-Fi图标，默认大小
SymbolGlyph($r('sys.symbol.ohos_wifi'))// 创建一个文件夹图标，并指定资源名称
SymbolGlyph($r('sys.symbol.ohos_folder'))

2. 颜色控制属性：fontColor

fontColor 属性允许你设置图标的颜色。你可以通过数组的方式指定多个颜色，图标会根据渲染策略选择颜色。从API 12开始，fontColor 属性也支持在卡片和元服务中使用。

代码示例：

// 设置单色：黑色
SymbolGlyph($r('sys.symbol.ohos_trash')).fontColor([Color.Black])// 设置多色：黑、绿、白（实际显示颜色取决于渲染策略）
SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Black, Color.Green, Color.White])

3. 大小控制属性：fontSize

fontSize 属性用于控制图标的大小，单位为 fp（比如 “16fp”）。该属性支持数字、字符串或 Resource 类型作为参数。需要注意的是，不要使用百分比形式的字符串，否则会导致错误。图标实际大小仅由 fontSize 决定，即便设置了 width 或 height，它们只会影响组件所占据的空间大小，而不改变图标本身的大小。

代码示例：

// 设置大小为20fp
SymbolGlyph($r('sys.symbol.ohos_wifi')).fontSize(20)// 使用字符串形式设置大小
SymbolGlyph($r('sys.symbol.ohos_trash')).fontSize("24fp") // 等价于24

4. 粗细控制属性：fontWeight

fontWeight 属性可以调整图标的线条粗细，取值范围从 100 到 900，间隔为 100，也可以使用字符串形式如 “bold” 或 “lighter”。不过，并非所有的图标都支持 fontWeight 属性，比如 sys.symbol.ohos_lungs 就不支持。从API 12开始，fontWeight 属性同样适用于卡片和元服务。

代码示例：

// 设置正常粗细
SymbolGlyph($r('sys.symbol.ohos_trash')).fontWeight(FontWeight.Normal)// 设置粗体，使用字符串形式
SymbolGlyph($r('sys.symbol.ohos_wifi')).fontWeight("bold")

5. 渲染策略属性：renderingStrategy

renderingStrategy 属性决定了图标的上色方式，有三种模式：SINGLE（单色）、MULTIPLE_COLOR（多色）、MULTIPLE_OPACITY（分层透明）。默认情况下，renderingStrategy 为 SINGLE，只使用数组中的第一个颜色。MULTIPLE_COLOR 和 MULTIPLE_OPACITY 则分别使用最多三个颜色或自动添加透明度。

代码示例：

// 单色模式：只生效第一个颜色（黑色）
SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).renderingStrategy(SymbolRenderingStrategy.SINGLE).fontColor([Color.Black, Color.Green])// 多色模式：三色生效（黑、绿、白）
SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR).fontColor([Color.Black, Color.Green, Color.White])

6. 动效策略属性：effectStrategy

effectStrategy 属性为图标添加动画效果，支持 NONE（无动效）、SCALE（整体缩放）、HIERARCHICAL（层级动效）。在设置 effectStrategy 属性后，动效会自动生效，无需额外触发。需要注意的是，不要将 effectStrategy 和 symbolEffect 属性混用，否则可能会产生冲突。

代码示例：

// 无动效
SymbolGlyph($r('sys.symbol.ohos_wifi')).effectStrategy(SymbolEffectStrategy.NONE)// 整体缩放动效
SymbolGlyph($r('sys.symbol.ohos_wifi')).effectStrategy(1) // 等价于SymbolEffectStrategy.SCALE

7. 高级动效属性：symbolEffect

symbolEffect 属性提供了更灵活的动效设置方式，支持多种动效类型如缩放、层级、脉冲等，还可以控制播放状态（isActive）或触发器（triggerValue）。从API 12开始支持卡片和元服务。symbolEffect 对象包括 ScaleSymbolEffect（缩放）、HierarchicalSymbolEffect（层级）等，每个对象都有自己的构造参数如 scope（范围）、direction（方向）等，使用 triggerValue 时，图标会在数值变化时触发动效，非常适合交互场景。

代码示例：

// 层级动效，播放状态为true
SymbolGlyph($r('sys.symbol.ohos_wifi')).symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), true)// 替换动效，由触发器控制
@State triggerValue: number = 0;
SymbolGlyph($r('sys.symbol.checkmark_circle')).symbolEffect(new ReplaceSymbolEffect(), triggerValue)
Button('trigger').onClick(() => {this.triggerValue = this.triggerValue + 1;
})

SymbolSpan 和 SymbolGlyph 的异同点

相同点：

  1. 都是用于显示图标小符号的组件。
  2. 都不支持子组件。
  3. 都仅支持系统预置的 symbol 资源名，引用非 symbol 资源将显示异常。

不同点：

  1. SymbolSpan 仅支持作为 Text 组件的子组件，而 SymbolGlyph 不能作为 Text 组件的子组件。

示例代码

示例1：设置渲染和动效策略

// xxx.ets
@Entry
@Component
struct Index {build() {Column() {Row() {Column() {Text("Light")SymbolGlyph($r('sys.symbol.ohos_trash')).fontWeight(FontWeight.Lighter).fontSize(96)}Column() {Text("Normal")SymbolGlyph($r('sys.symbol.ohos_trash')).fontWeight(FontWeight.Normal).fontSize(96)}Column() {Text("Bold")SymbolGlyph($r('sys.symbol.ohos_trash')).fontWeight(FontWeight.Bold).fontSize(96)}}Row() {Column() {Text("单色")SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).fontSize(96).renderingStrategy(SymbolRenderingStrategy.SINGLE).fontColor([Color.Black, Color.Green, Color.White])}Column() {Text("多色")SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).fontSize(96).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR).fontColor([Color.Black, Color.Green, Color.White])}Column() {Text("分层")SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')).fontSize(96).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY).fontColor([Color.Black, Color.Green, Color.White])}}Row() {Column() {Text("无动效")SymbolGlyph($r('sys.symbol.ohos_wifi')).fontSize(96).effectStrategy(SymbolEffectStrategy.NONE)}Column() {Text("整体缩放动效")SymbolGlyph($r('sys.symbol.ohos_wifi')).fontSize(96).effectStrategy(1) // 等价于SymbolEffectStrategy.SCALE}Column() {Text("层级动效")SymbolGlyph($r('sys.symbol.ohos_wifi')).fontSize(96).effectStrategy(2) // 等价于SymbolEffectStrategy.HIERARCHICAL}}}}
}

示例2：设置动效

// xxx.ets
@Entry
@Component
struct Index {@State isActive: boolean = true;@State triggerValueReplace: number = 0;replaceFlag: boolean = true;build() {Column() {Row() {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;})}.margin({ right: 20 })Column() {Text("替换动效")SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')).fontSize(96).symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)Button('trigger').onClick(() => {this.replaceFlag = !this.replaceFlag;this.triggerValueReplace = this.triggerValueReplace + 1;})}}}.margin({left: 30,top: 50})}
}

SymbolGlyph 真正是一个宝藏组件！从基础的图标显示到复杂的动效设计，它都能胜任。通过 fontColor、fontSize、renderingStrategy 等属性，你可以轻松定制图标的外观；effectStrategy 和 symbolEffect 则让图标能够动起来，提升用户体验。记住关键点：只使用系统资源、避免属性混用、多利用枚举简化代码。结合事件支持，你能够创建出超交互的界面。希望这篇口语化解析能够帮助你快速上手 SymbolGlyph，所有代码示例都可以直接复制到你的项目中使用。

参考文档：

  • SymbolSpan 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-symbolspan-V13
  • SymbolGlyph 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-symbolglyph-V13

参考链接:

  • HarmonyOS Symbol 主题图标库
  • Zhihu 技术文章
  • Bilibili 视频
  • CSDN 文章

文章转载自：

http://fHJ50KlE.hcbky.cn
http://U3d5tSsP.hcbky.cn
http://htDGfaLf.hcbky.cn
http://iSHdUrwN.hcbky.cn
http://45xn5V84.hcbky.cn
http://TowzOrez.hcbky.cn
http://MxZGVfWM.hcbky.cn
http://qZEkdGHM.hcbky.cn
http://rWYU9HUy.hcbky.cn
http://ur55tqKF.hcbky.cn
http://o1oUwuAj.hcbky.cn
http://04V6bnKB.hcbky.cn
http://BhXEdx99.hcbky.cn
http://5Xh44mgA.hcbky.cn
http://RQ2DsMyC.hcbky.cn
http://0G2EZEHY.hcbky.cn
http://NsMHYZ0s.hcbky.cn
http://8Pm9VDsM.hcbky.cn
http://aw2Edgfa.hcbky.cn
http://KV2Y45IK.hcbky.cn
http://GnHliIhb.hcbky.cn
http://ccLeE9cf.hcbky.cn
http://Q4yaaaBC.hcbky.cn
http://1Xb5TYgG.hcbky.cn
http://J85n8rKC.hcbky.cn
http://F1mLJHb2.hcbky.cn
http://ihjNA8NJ.hcbky.cn
http://SPuMaq8B.hcbky.cn
http://K6FwJFqH.hcbky.cn
http://5xfMavT1.hcbky.cn
http://www.dtcms.com/a/362545.html

相关文章：

  • 【学Python自动化】 8.1 Python 与 Rust 错误处理对比学习笔记
  • 拔河（蓝桥杯）（前缀和）
  • Docker CI/CD 自动化部署配置指南
  • 【Datawhale之Happy-LLM】3种常见的decoder-only模型——Github最火大模型原理与实践教程task07
  • C#---共享项目
  • 【C++变量和数据类型：从基础到高级】
  • AI 在教育领域的落地困境：个性化教学与数据隐私的平衡之道
  • 线程特定存储
  • 【Go语言入门教程】 Go语言的起源与技术特点：从诞生到现代编程利器（一）
  • 深入浅出 RabbitMQ-TTL+死信队列+延迟队列
  • idea上传本地项目代码到Gitee仓库教程
  • 【论文阅读】Deepseek-VL：走向现实世界的视觉语言理解
  • 【Web前端】JS+DOM来实现乌龟追兔子小游戏
  • GPT-5在医疗领域应用的研究效能初探（下）
  • 跨平台游戏引擎 Axmol-2.8.0 发布
  • https_server.cpython-310.pyc 等pyc后缀这些是什么文件
  • Python+DRVT 从外部调用 Revit：批量创建墙
  • DVWA靶场通关笔记-反射型XSS(Impossible级别)
  • 4.MySQL数据类型
  • 【51单片机6位数码管显示矩阵键值至右向左自左向右】2022-11-29
  • 企业DevOps的安全与合规关键：三大主流DevOps平台能力对比
  • 图像加密安全传输--设备端视频流加密，手机端视频流解密，使用ChaCha20-Poly1305 进行系统分析
  • TLS终止位置的安全影响深度解析：三种模式技术对比与选择建议
  • 网络安全法合规视角下的安全运维体系建设：关键控制点与实施细节深度解析
  • 基于STM32的居家养老健康安全检测系统
  • OpenHarmony HVB安全启动一键启停全栈实践：从U-Boot签名到fastboot解锁的闭环避坑指南
  • Parasoft C/C++test如何实现开发环境内嵌的安全检测
  • 互联网大厂Java面试三大回合全解析：从语言特性到性能安全
  • 分公司、工厂、出差人员远程访问办公系统，如何安全稳定又省钱？
  • 【数据结构】八大排序之快速排序：分而治之的艺术