企业官网建设流程全解析

前言

在“海风日记“项目中，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 颜色层级的对应关系：

2.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 颜色分类

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 的着色机制：

1. fontColor 数组语法：单色和多色 Symbol 的着色方式
2. 颜色层级映射：数组索引与 Symbol 颜色层级的对应
3. 条件着色：选中态与未选中态的颜色切换
4. 颜色规范：项目中统一的颜色使用规范
5. 渲染策略：单色、多色、层级三种渲染模式

下一篇文章将深入讲解RadialGradient 径向光晕的实现，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• SymbolGlyph API 文档
• HarmonyOS Symbol 图标列表
• Colors.ets 色彩管理
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区