鸿蒙应用开发实战【61】— 卡号颜色主题系统CardColor枚举映射本文是「号码助手全栈开发系列」第 61 篇持续更新中…开源社区https://openharmonycrossplatform.csdn.net前言从第 28 篇开始每个卡号都有一个color字段用于视觉标识。本篇系统梳理 CardColor 的设计——从类型定义到颜色值映射、从渐变双色到 UI 组件集成。这个设计看似简单但它串联了数据模型、主题系统、颜色选择器和 AvatarBadge 等多个模块。本篇涵盖CardColor 联合类型定义、CARD_COLOR_HEX 颜色值映射表、cardGradient 渐变双色、CardDetailPage 颜色选择器、卡片颜色在 AvatarBadge 中的应用。一、类型定义1.1 联合字符串类型exporttypeCardColorblue|orange|green|pink|purple为何选择 string literal union 而非 enumArkTS 对 TypeScriptenum编译支持有限在特定版本中可能存在兼容问题string联合类型与 RDB 存储天然兼容——color字段直接存blue字符串序列化/反序列化无需额外转换减少了出错概率1.2 在 Entity 中的使用exportinterfaceCardEntity{id?:numberlabel:stringphone_number:stringcarrier:stringremark:string/** 显示颜色标识 */color:CardColor// blue | orange | green | pink | purplesort_order:numbercreated_at:numberupdated_at:number}数据库创建时color字段定义为TEXT NOT NULL DEFAULT blue。二、颜色值映射2.1 CARD_COLOR_HEX 调色板// AppColors.etsstaticreadonlyCARD_COLOR_HEX:string[][#4F7CFF,// blue — 品牌蓝#3CC463,// green — 翡翠绿#FF2E4D,// pink — 玫瑰红#FF7A1E,// orange — 活力橙#7B61FF// purple — 梦幻紫]设计原则5 色满足用户辨识需求不过多造成选择负担颜色选中度高涵盖冷暖色系与主色#4F7CFFblue一致blue 作为默认值2.2 cardGradient 渐变双色每个卡号颜色对应一组渐变双色用于AvatarBadge头像背景staticcardGradient(colorKey:string):[string,string]{switch(colorKey){caseblue:return[AppColors.PRIMARY,AppColors.PRIMARY_2]// #4F7CFF → #7C5CFFcasegreen:return[#3CC463,#6BE28E]// 绿 → 浅绿casepink:return[#FF2E4D,#FF7A90]// 红 → 浅红caseorange:return[#FF7A1E,#FFB067]// 橙 → 浅橙casepurple:return[#7B61FF,#9B85FF]// 紫 → 浅紫default:return[AppColors.PRIMARY,AppColors.PRIMARY_2]}}default 兜底当数据库中存储了非法 color 值时使用 blue 作为安全默认值。三、UI 中的使用3.1 AvatarBadge 头像AvatarBadge({text:card.label,colorStart:AppColors.cardGradient(card.color)[0],colorEnd:AppColors.cardGradient(card.color)[1],badgeSize:64,radius:18,fontSize:18})CardDetailPage中展示卡号大头像时利用cardGradient将blue这样的字符串映射为[#4F7CFF, #7C5CFF]形成渐变头像。3.2 颜色选择器 SwatchesconstCOLOR_KEYS:CardColor[][blue,green,pink,orange,purple]Row({space:10}){ForEach(COLOR_KEYS,(key:CardColor,index:number){Stack(){if(this.selectedColorIndexindex){Text(✓).fontSize(Size.font12).fontWeight(800).fontColor(#FFFFFF)}}.width(Size.s30).height(Size.s30).borderRadius(Size.s9).backgroundColor(AppColors.CARD_COLOR_HEX[index])// 直接索引取色.border(this.selectedColorIndexindex?{width:2.5,color:#FFFFFF,radius:9}:{width:0}).shadow(this.selectedColorIndexindex?{radius:10,color:AppColors.CARD_COLOR_HEX[index],offsetY:4}:{radius:0,color:#00000000,offsetY:0}).onClick((){this.selectedColorIndexindex})})}交互细节选中态白色边框 外阴影 ✓对勾非选中态无边框无阴影CARD_COLOR_HEX[index]直接索引——COLOR_KEYS数组顺序与 hex 数组一一对应3.3 保存时回写// CardDetailPage.onSaveawaitCardDao.update({...card,color:COLOR_KEYS[this.selectedColorIndex],// CardColor 字符串值updated_at:now})selectedColorIndex映射回CardColor字符串直接写入数据库。四、完整设计回顾┌──────────────────────────────────────────────────────────────┐ │ CardColor 系统全景图 │ ├──────────────────────────────────────────────────────────────┤ │ │ │ Models.ets AppColors.ets CardDetailPage │ │ ┌───────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ CardColor │───────▶│CARD_COLOR_ │───────▶│ 颜色选择器 │ │ │ │ union │ │ HEX[5] │ │ swatches │ │ │ └───────────┘ ├─────────────┤ ├─────────────┤ │ │ ┌───────────┐ │cardGradient │───────▶│ AvatarBadge │ │ │ │CardEntity │ │( ) → [s,e] │ │ 渐变头像 │ │ │ │.color │ └─────────────┘ └─────────────┘ │ │ └───────────┘ │ │ │ │ │ ▼ │ │ RDB: cards.color blue / green / pink / ... │ │ (TEXT NOT NULL DEFAULT blue) │ │ │ └──────────────────────────────────────────────────────────────┘数据流用户在颜色选择器选择 → index → CardColor 字符串 → RDB 存储 → 再次加载时通过cardGradient渲染五、设计对比5.1 CardColor 与枚举方案对比维度联合类型当前方案TypeScript enumArkTS 兼容性✅ 完全兼容⚠️ 有限支持数据库存储直接存 ‘blue’无需转换需存数字或字符串值序列化天然兼容 JSON需额外转换逻辑扩展性类型 hex gradient 四步自动序号但需处理映射编译时安全✅ 类型检查严格✅ 类型安全5.2 扩展性考虑如果需要增加新颜色// 1. 类型定义加一项exporttypeCardColorblue|orange|green|pink|purple|teal// 2. 颜色常量加 hexstaticreadonlyCARD_COLOR_HEX:string[][...,#00BFA5]// 3. cardGradient 加新 casecaseteal:return[#00BFA5,#64FFDA]// 4. COLOR_KEYS 数组加一项constCOLOR_KEYS:CardColor[][blue,green,pink,orange,purple,teal]四步即可无缝扩展体现了解耦设计的优势。小结要点说明类型定义type CardColor blue | orange | ...联合类型颜色映射CARD_COLOR_HEX[5] 对应 5 色调色板渐变双色cardGradient(key) → [start, end] 渐变对颜色选择器索引匹配选中态白边 阴影 ✓存储RDB TEXT 字符串default blue扩展类型 hex gradient 数组 四步新增颜色如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源openHarmony 跨平台社区https://openharmonycrossplatform.csdn.netHarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/HarmonyOS 颜色资源开发指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-accessHarmonyOS 主题换肤开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/theme-switch