前言在移动应用开发中图标系统是品牌视觉和用户体验的重要组成部分。HarmonyOS 提供了SymbolGlyph组件支持使用系统内置的 Symbol 图标同时提供丰富的着色和样式定制能力。“海风日记“在整个项目中统一使用SymbolGlyph 系统图标设计了清晰的颜色令牌体系确保每个图标的颜色、大小和风格保持一致。本文将从源码出发深入讲解 SymbolGlyph 的使用方法、着色机制、颜色令牌体系以及最佳实践。一、SymbolGlyph 组件概述1.1 什么是 SymbolGlyphSymbolGlyph是 HarmonyOS 提供的系统图标组件通过$r(sys.symbol.xxx)引用系统内置的 Symbol 图标资源。与传统的图片图标相比SymbolGlyph 有以下优势特性SymbolGlyph图片图标PNG字体图标IconFont体积无额外资源需要打包图片需要加载字体文件缩放矢量无损位图有锯齿矢量无损颜色支持动态着色固定颜色单色多色支持多色 Symbol不支持不支持系统适配自动适配主题需手动适配需手动适配1.2 系统 Symbol 图标的引用方式HarmonyOS 提供了丰富的系统 Symbol 图标通过$r(sys.symbol.xxx)引用// 常用的系统 Symbol 图标 $r(sys.symbol.house) // 首页 $r(sys.symbol.calendar) // 日历 $r(sys.symbol.clock) // 时钟/回顾 $r(sys.symbol.person) // 个人 $r(sys.symbol.plus) // 加号 $r(sys.symbol.magnifyingglass) // 搜索 $r(sys.symbol.chevron_left) // 左箭头 $r(sys.symbol.chevron_right) // 右箭头 $r(sys.symbol.xmark) // 关闭 $r(sys.symbol.square_and_pencil) // 编辑1.3 海风日记中使用的 Symbol 图标统计“海风日记“全项目共使用了30个不同的 Symbol 图标以下是按功能分类的统计分类图标使用场景导航house,calendar,clock,person底部 Tab 栏操作plus,xmark,chevron_left,chevron_right导航栏操作编辑square_and_pencil,camera,face_smiling,trash写日记工具栏搜索magnifyingglass,list_bullet,flame搜索页面设置gearshape,moon,lock_shield,phone设置菜单数据externaldrive,arrow_up,arrow_down,arrow_clockwise数据管理其他pin,ellipsis_circle,shareplay,checkmark_circle_fill多处功能二、SymbolGlyph 的着色机制2.1 基础颜色配置SymbolGlyph 使用fontColor属性设置颜色语法为数组形式SymbolGlyph($r(sys.symbol.house)) .fontSize(22) .fontColor([COLOR_TAB_ACTIVE]) // 数组语法2.2 选中态与未选中态的颜色切换“海风日记“的 Tab 导航栏根据选中状态切换图标颜色SymbolGlyph(icon) .fontSize(22) .fontColor([ this.currentIndex index ? COLOR_TAB_ACTIVE // #F5A623 橙色 : COLOR_TAB_INACTIVE // #C0BAB4 暖灰 ])2.3 多色 Symbol 的着色对于支持多色的 Symbol 图标fontColor数组的每个元素对应一个颜色层级// 多色 Symbol 示例假设图标支持 3 层颜色 SymbolGlyph($r(sys.symbol.person_crop_circle_fill)) .fontSize(22) .fontColor([ COLOR_AMBER, // 第一层颜色 COLOR_PRIMARY, // 第二层颜色 COLOR_WHITE // 第三层颜色 ])2.4 颜色数组的层级对应关系fontColor数组索引与 Symbol 颜色层级的对应关系数组索引层级说明示例颜色[0]第一层主要填充色#C8956A琥珀[1]第二层次要区域色#F5A623橙色[2]第三层细节线条色#FFFFFF白色提示对于单色 Symbol传入一个元素的数组即可对于多色 Symbol需要按顺序传入对应数量的颜色值。三、项目中 SymbolGlyph 的典型用法3.1 Tab 导航栏图标Index.ets中的 Tab 图标使用条件渲染控制选中态颜色Builder tabBuilder(index: number, label: string, icon: Resource) { Column({ space: 2 }) { SymbolGlyph(icon) .fontSize(22) .fontColor([ this.currentIndex index ? COLOR_TAB_ACTIVE // #F5A623 : COLOR_TAB_INACTIVE // #C0BAB4 ]) Text(label) .fontSize(10) .fontColor(this.currentIndex index ? COLOR_TAB_ACTIVE : COLOR_TAB_INACTIVE) } }3.2 浮动按钮图标中间的“写日记“浮动按钮使用白色加号图标Button() { SymbolGlyph($r(sys.symbol.plus)) .fontSize(26) .fontColor([#FFFFFF]) } .width(56).height(56) .borderRadius(28) .backgroundColor(#F5A623)3.3 导航栏操作按钮在日记详情页中编辑和更多操作按钮Row({ space: 8 }) { // 编辑按钮 Button() { SymbolGlyph($r(sys.symbol.square_and_pencil)) .fontSize(18).fontColor([COLOR_TEXT_MAIN]) } .backgroundColor(transparent).width(36).height(36) // 更多按钮 Button() { SymbolGlyph($r(sys.symbol.ellipsis_circle)) .fontSize(18).fontColor([COLOR_TEXT_MAIN]) } .backgroundColor(transparent).width(36).height(36) }3.4 搜索页图标搜索框中的放大镜图标Row() { SymbolGlyph($r(sys.symbol.magnifyingglass)) .fontSize(16) .fontColor([COLOR_TEXT_HINT]) TextInput({ placeholder: 搜索日记内容、标签... }) .layoutWeight(1).height(36) } .height(40) .backgroundColor(#FFFFFF) .borderRadius(INPUT_RADIUS) .padding({ left: 12, right: 8 })3.5 设置菜单图标设置菜单中的每一行图标Row({ space: 12 }) { SymbolGlyph(item.icon) .fontSize(18) .fontColor([item.danger ? #D06060 : COLOR_AMBER]) Text(item.label) .fontSize(15) .fontColor(item.danger ? #D06060 : COLOR_TEXT_MAIN) .layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)) .fontSize(14) .fontColor([COLOR_TEXT_HINT]) } .width(100%).height(50) .padding({ left: PAGE_PADDING, right: PAGE_PADDING })四、颜色令牌体系4.1 SymbolGlyph 的颜色管理“海风日记“通过Colors.ets集中管理所有颜色SymbolGlyph 使用的颜色分为以下几类颜色常量色值用途COLOR_TAB_ACTIVE#F5A623Tab 选中态图标COLOR_TAB_INACTIVE#C0BAB4Tab 未选中态图标COLOR_AMBER#C8956A设置菜单、工具栏图标COLOR_TEXT_MAIN#2D2926导航栏操作图标COLOR_TEXT_HINT#BEB8B2辅助图标、箭头COLOR_DANGER#D06060删除、危险操作图标COLOR_WHITE#FFFFFF暗色背景上的图标4.2 颜色常量的定义// Colors.ets — 颜色令牌体系 /** 底部导航 Tab 未选中色 */ export const COLOR_TAB_INACTIVE #C0BAB4 /** 底部导航 Tab 选中色 */ export const COLOR_TAB_ACTIVE #F5A623 /** 琥珀棕 — 品牌文案、标签、辅助色 */ export const COLOR_AMBER #C8956A /** 主文字 — 暖棕黑 */ export const COLOR_TEXT_MAIN #2D2926 /** 提示/占位文字 */ export const COLOR_TEXT_HINT #BEB8B2 /** 错误/危险色 */ export const COLOR_DANGER #D060604.3 颜色使用规范在项目中使用 SymbolGlyph 颜色时遵循以下规范导航类图标使用COLOR_TAB_ACTIVE/COLOR_TAB_INACTIVE操作类图标使用COLOR_AMBER琥珀棕导航栏图标使用COLOR_TEXT_MAIN暖棕黑辅助图标使用COLOR_TEXT_HINT暖灰危险操作使用COLOR_DANGER红色高亮强调使用COLOR_PRIMARY橙色五、SymbolGlyph 的高级用法5.1 图标大小与权重fontSize控制图标大小fontWeight控制图标线条粗细SymbolGlyph($r(sys.symbol.house)) .fontSize(22) // 图标尺寸 .fontWeight(FontWeight.Bold) // 线条粗细5.2 图标渲染模式renderingStrategy控制图标的渲染策略SymbolGlyph($r(sys.symbol.person_crop_circle_fill)) .renderingStrategy(SymbolRenderingStrategy.SINGLE) // 单色模式 // 或 .renderingStrategy(SymbolRenderingStrategy.MULTI_COLOR) // 多色模式 // 或 .renderingStrategy(SymbolRenderingStrategy.HIERARCHICAL) // 层级模式渲染模式说明适用场景SINGLE单色渲染所有层级使用同一种颜色简单图标MULTI_COLOR多色渲染使用 fontColor 数组中的不同颜色复杂图标HIERARCHICAL层级渲染通过透明度区分层级需要层次感的图标5.3 图标效果effectStrategy控制图标的视觉效果SymbolGlyph($r(sys.symbol.plus)) .effectStrategy(SymbolEffectStrategy.SCALE) // 缩放效果 // 或 .effectStrategy(SymbolEffectStrategy.BOUNCE) // 弹跳效果 // 或 .effectStrategy(SymbolEffectStrategy.PULSE) // 脉冲效果5.4 图标动画SymbolGlyph 支持内置的动画效果SymbolGlyph($r(sys.symbol.plus)) .fontSize(26) .fontColor([#FFFFFF]) .effectStrategy(SymbolEffectStrategy.SCALE) // 点击时缩放动画六、SymbolGlyph 与 Resource 管理6.1 $r() 资源引用函数$r()是 HarmonyOS 中的资源引用函数用于引用系统或应用资源// 引用系统 Symbol 图标 $r(sys.symbol.house) // 引用应用图片资源 $r($media:app_icon) // 引用应用字符串资源 $r($string:app_name) // 引用应用颜色资源 $r($color:start_window_background)6.2 资源类型与引用格式资源类型引用格式示例系统 Symbol 图标$r(sys.symbol.xxx)$r(sys.symbol.house)应用图片$r($media:xxx)$r($media:app_icon)应用字符串$r($string:xxx)$r($string:app_name)应用颜色$r($color:xxx)$r($color:primary)6.3 在数据模型中使用 Resource 类型在“海风日记“中菜单项数据使用Resource类型存储图标引用interface MenuItemData { icon: Resource // 图标资源引用类型 label: string url: string danger?: boolean } // 初始化数据 const menuItems: MenuItemData[] [ { icon: $r(sys.symbol.person_crop_circle_fill), label: 个人信息, url: ... }, { icon: $r(sys.symbol.gearshape), label: 个性设置, url: ... }, { icon: $r(sys.symbol.moon), label: 深色模式, url: ... }, ]七、常见问题与最佳实践7.1 图标不显示问题SymbolGlyph 显示为空白或占位符。原因引用的 Symbol 名称不存在或拼写错误。解决方案检查 Symbol 名称是否正确参考[系统 Symbol 图标列表](https://atomgit.com/openharmony/docs。// 正确的引用方式 $r(sys.symbol.plus) // 正确 $r(sys.symbol.add) // 错误add 不存在 $r(sys.symbol.plus.circle) // 可能是 plus_circle 或 plus.circle7.2 颜色不生效问题设置了fontColor但图标颜色没有变化。原因使用了不支持多色着色的图标或fontColor数组长度不够。解决方案// 单色图标只传入一个颜色 SymbolGlyph($r(sys.symbol.house)) .fontColor([COLOR_TAB_ACTIVE]) // 多色图标传入对应层级的颜色 SymbolGlyph($r(sys.symbol.person_crop_circle_fill)) .fontColor([COLOR_AMBER, COLOR_PRIMARY])7.3 图标大小不一致问题不同 Symbol 图标显示大小不一致。原因不同 Symbol 的设计尺寸有差异。解决方案统一设置fontSize// 统一设置图标大小 SymbolGlyph(icon).fontSize(22) // Tab 栏图标统一 22vp SymbolGlyph(icon).fontSize(18) // 操作按钮图标统一 18vp SymbolGlyph(icon).fontSize(14) // 辅助箭头统一 14vp7.4 性能优化避免动态创建 Resource 引用$r()应在初始化时创建而非在循环中重复调用复用颜色常量使用预定义的颜色常量避免重复写色值合理使用渲染模式简单图标使用单色模式减少渲染开销总结本文详细讲解了 HarmonyOS 中 SymbolGlyph 系统图标在“海风日记“中的统一使用方案SymbolGlyph 基础系统图标的引用方式、优势和特点着色机制fontColor数组语法、选中态切换、多色着色典型用法Tab 导航、浮动按钮、操作按钮、搜索图标、设置菜单颜色令牌体系SymbolGlyph 颜色分类管理规范高级用法渲染模式、效果策略、图标动画Resource 管理$r()资源引用、数据模型中的 Resource 类型通过统一使用 SymbolGlyph 系统图标我们实现了零额外图标资源、统一着色风格、自动适配系统主题的效果大大减少了应用包体积和维护成本。下一篇文章将深入讲解Router 路由管理包括 pushUrl、replaceUrl、back 以及参数传递的完整用法敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源SymbolGlyph 组件 API 文档HarmonyOS 系统 Symbol 图标列表$r 资源引用文档海风日记项目源码ArkUI 组件开发指南开源鸿蒙跨平台社区[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docsArkUI 颜色管理
