SymbolGlyph 与 FontColor 数组语法：Symbol 图标着色方案

前言

在"海风日记"项目中，SymbolGlyph 的 fontColor 属性使用数组语法来实现图标着色。这种语法支持单色和多色 Symbol 的着色，是 HarmonyOS 中图标着色的核心 API。

本文将从源码出发，深入讲解 SymbolGlyph 的着色机制、fontColor 数组语法的使用方式、多色 Symbol 的着色原理以及最佳实践。

一、fontColor 数组语法

1.1 基本语法

typescript 复制代码

SymbolGlyph($r('sys.symbol.house'))
  .fontSize(22)
  .fontColor([COLOR_TAB_ACTIVE])  // 数组语法

1.2 单色与多色

对于单色 Symbol，传入一个元素的数组：

typescript 复制代码

// 单色
SymbolGlyph($r('sys.symbol.plus'))
  .fontColor(['#FFFFFF'])

对于多色 Symbol，传入多个元素：

typescript 复制代码

// 多色
SymbolGlyph($r('sys.symbol.person_crop_circle_fill'))
  .fontColor([COLOR_AMBER, COLOR_PRIMARY])

二、颜色数组的层级对应

2.1 层级映射

fontColor 数组索引与 Symbol 颜色层级的对应关系：

数组索引	层级	说明	示例
`[0]`	第一层	主要填充	`#C8956A`
`[1]`	第二层	次要区域	`#F5A623`
`[2]`	第三层	细节线条	`#FFFFFF`

2.2 实际应用

typescript 复制代码

// 在 MineTab 中
SymbolGlyph(item.icon)
  .fontSize(18)
  .fontColor([item.danger ? '#D06060' : COLOR_AMBER])

三、选中态与未选中态的颜色切换

3.1 条件着色

typescript 复制代码

SymbolGlyph(icon)
  .fontSize(22)
  .fontColor([
    this.currentIndex === index
      ? COLOR_TAB_ACTIVE   // '#F5A623' 选中态
      : COLOR_TAB_INACTIVE  // '#C0BAB4' 未选中态
  ])

3.2 颜色常量

typescript 复制代码

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 使用示例

typescript 复制代码

// 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 渲染模式

typescript 复制代码

SymbolGlyph($r('sys.symbol.person_crop_circle_fill'))
  .renderingStrategy(SymbolRenderingStrategy.SINGLE)       // 单色
  .renderingStrategy(SymbolRenderingStrategy.MULTI_COLOR)  // 多色
  .renderingStrategy(SymbolRenderingStrategy.HIERARCHICAL) // 层级

5.2 效果策略

typescript 复制代码

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
开源鸿蒙跨平台社区