前言在“海风日记“项目中SymbolGlyph 的fontColor属性使用数组语法来实现图标着色。这种语法支持单色和多色 Symbol 的着色是 HarmonyOS 中图标着色的核心 API。本文将从源码出发深入讲解 SymbolGlyph 的着色机制、fontColor 数组语法的使用方式、多色 Symbol 的着色原理以及最佳实践。一、fontColor 数组语法1.1 基本语法SymbolGlyph($r(sys.symbol.house)) .fontSize(22) .fontColor([COLOR_TAB_ACTIVE]) // 数组语法1.2 单色与多色对于单色 Symbol传入一个元素的数组// 单色 SymbolGlyph($r(sys.symbol.plus)) .fontColor([#FFFFFF])对于多色 Symbol传入多个元素// 多色 SymbolGlyph($r(sys.symbol.person_crop_circle_fill)) .fontColor([COLOR_AMBER, COLOR_PRIMARY])二、颜色数组的层级对应2.1 层级映射fontColor数组索引与 Symbol 颜色层级的对应关系数组索引层级说明示例[0]第一层主要填充#C8956A[1]第二层次要区域#F5A623[2]第三层细节线条#FFFFFF2.2 实际应用// 在 MineTab 中 SymbolGlyph(item.icon) .fontSize(18) .fontColor([item.danger ? #D06060 : COLOR_AMBER])三、选中态与未选中态的颜色切换3.1 条件着色SymbolGlyph(icon) .fontSize(22) .fontColor([ this.currentIndex index ? COLOR_TAB_ACTIVE // #F5A623 选中态 : COLOR_TAB_INACTIVE // #C0BAB4 未选中态 ])3.2 颜色常量export const COLOR_TAB_ACTIVE #F5A623 // 选中态橙色 export const COLOR_TAB_INACTIVE #C0BAB4 // 未选中态暖灰 export const COLOR_AMBER #C8956A // 琥珀色 export const COLOR_DANGER #D06060 // 危险色四、项目中 SymbolGlyph 的颜色使用规范4.1 颜色分类用途颜色常量色值使用场景Tab 选中COLOR_TAB_ACTIVE#F5A623底部导航栏选中Tab 未选中COLOR_TAB_INACTIVE#C0BAB4底部导航栏未选中操作图标COLOR_AMBER#C8956A工具栏、设置菜单导航图标COLOR_TEXT_MAIN#2D2926导航栏按钮辅助图标COLOR_TEXT_HINT#BEB8B2箭头、辅助元素危险操作COLOR_DANGER#D06060删除、退出白色图标COLOR_WHITE#FFFFFF暗色背景上4.2 使用示例// Tab 栏选中/未选中 SymbolGlyph(icon).fontColor([ isActive ? COLOR_TAB_ACTIVE : COLOR_TAB_INACTIVE ]) // 操作按钮 SymbolGlyph($r(sys.symbol.camera)).fontColor([COLOR_AMBER]) // 危险操作 SymbolGlyph($r(sys.symbol.trash)).fontColor([COLOR_DANGER]) // 白色浮动按钮 SymbolGlyph($r(sys.symbol.plus)).fontColor([#FFFFFF])五、渲染策略5.1 渲染模式SymbolGlyph($r(sys.symbol.person_crop_circle_fill)) .renderingStrategy(SymbolRenderingStrategy.SINGLE) // 单色 .renderingStrategy(SymbolRenderingStrategy.MULTI_COLOR) // 多色 .renderingStrategy(SymbolRenderingStrategy.HIERARCHICAL) // 层级5.2 效果策略SymbolGlyph($r(sys.symbol.plus)) .effectStrategy(SymbolEffectStrategy.SCALE) // 缩放 .effectStrategy(SymbolEffectStrategy.BOUNCE) // 弹跳 .effectStrategy(SymbolEffectStrategy.PULSE) // 脉冲六、常见问题与排查6.1 颜色不生效问题fontColor设置了颜色值但图标颜色没有变化。原因数组语法错误或使用了不支持的颜色层级。解决方案确保使用数组语法且颜色值数量与 Symbol 层级匹配。6.2 多色 Symbol 显示异常问题多色 Symbol 显示颜色混乱。原因fontColor数组元素数量与 Symbol 层级不匹配。解决方案使用renderingStrategy(SymbolRenderingStrategy.SINGLE)强制单色渲染。总结本文通过“海风日记“的实际案例深入讲解了 SymbolGlyph 的着色机制fontColor 数组语法单色和多色 Symbol 的着色方式颜色层级映射数组索引与 Symbol 颜色层级的对应条件着色选中态与未选中态的颜色切换颜色规范项目中统一的颜色使用规范渲染策略单色、多色、层级三种渲染模式下一篇文章将深入讲解RadialGradient 径向光晕的实现敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源SymbolGlyph API 文档HarmonyOS Symbol 图标列表Colors.ets 色彩管理海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区