本文深入解析 ImportantDays 项目中的颜色选择器系统包括 16 种预设颜色的设计考量、颜色选择器的 UI 实现、实时预览效果、颜色在各场景中的应用列表卡片、日历标记、日期文字以及颜色与倒数/正数模式的联动设计。一、颜色系统概述ImportantDays 为每个重要日提供 16 种预设颜色颜色贯穿应用的各个角落颜色选择器添加/编辑弹窗 ↓ selectedColor ├── 列表卡片色条ImportantDayPage ├── 日历月视图圆点MonthWeekCalendar ├── 日历月视图日期文字MonthWeekCalendar ├── 日历年视图标记点BaseCalendar ├── 日历年视图日期文字BaseCalendar ├── 倒数/正数按钮背景色 └── 预览方块背景色二、预设颜色定义exportconstPRESET_COLORS:string[][#FF6B6B,// 红色#4ECDC4,// 青色#45B7D1,// 蓝色#FFA07A,// 浅鲑鱼色#98D8C8,// 薄荷绿#F7DC6F,// 黄色#BB8FCE,// 紫色#85C1E2,// 天蓝#F8B739,// 橙色#52BE80,// 绿色#EC7063,// 珊瑚红#5DADE2,// 浅蓝#48C9B0,// 翡翠#F4D03F,// 金色#AF7AC5,// 兰花紫#85929E// 灰色];颜色分类分类颜色十六进制暖色系红色#FF6B6B浅鲑鱼色#FFA07A橙色#F8B739黄色#F7DC6F金色#F4D03F珊瑚红#EC7063冷色系青色#4ECDC4蓝色#45B7D1天蓝#85C1E2浅蓝#5DADE2翡翠#48C9B0薄荷绿#98D8C8绿色#52BE80紫色系紫色#BB8FCE兰花紫#AF7AC5中性色灰色#85929E设计考量16 色刚好4×4 网格完美排列不多不少柔和色调所有颜色都偏柔和避免高饱和度刺眼区分度高相邻颜色差异明显易于辨认情感覆盖暖色表达热情/期待冷色表达平静/理性紫色表达神秘/特殊三、默认颜色exportconstDEFAULT_COLOR#FF6B6B;默认颜色为红色#FF6B6B也是应用的主题色。选择红色作为默认值的原因红色是最引人注目的颜色适合大多数重要日场景生日、纪念日等与应用整体设计风格一致四、颜色选择器 UI 实现预览区域Row(){Stack({alignContent:Alignment.Center}){Column().width(40).height(40).backgroundColor(this.selectedColor).borderRadius(8)Text(this.isCountdown?倒:正).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)}.width(40).height(40)Text(this.selectedColor).fontSize(12).fontColor(#999999).margin({left:8})}预览效果┌──────┐ #FF6B6B │ 倒 │ └──────┘40×40vp 的圆角方块背景色为选中颜色中央显示倒或正字白色粗体右侧显示十六进制颜色值颜色网格Flex({wrap:FlexWrap.Wrap}){ForEach(PRESET_COLORS,(color:string,index:number){Stack({alignContent:Alignment.Center}){Circle({width:32,height:32}).fill(color)if(this.selectedColorcolor){Text(✓).fontSize(16).fontColor(#FFFFFF).fontWeight(FontWeight.Bold)}}.width(36).height(36).margin({right:8,bottom:8}).onClick((){this.selectedColorcolor;})})}网格布局使用Flex({ wrap: FlexWrap.Wrap })实现自动换行每个色块 32×32vp 的圆形外层 36×36vp留出点击区域间距右 8vp下 8vp选中标记if(this.selectedColorcolor){Text(✓).fontSize(16).fontColor(#FFFFFF).fontWeight(FontWeight.Bold)}选中的颜色圆点中央显示白色 ✓ 标记清晰指示当前选择。交互行为点击颜色圆点 →this.selectedColor color→ 预览区域实时更新 → 倒数/正数按钮背景色更新。五、颜色在列表卡片中的应用卡片色条// ImportantDayPage 中的卡片Stack({alignContent:Alignment.Center}){Column().width(56).height(70).backgroundColor(day.color)// 重要日颜色作为色条.borderRadius({topLeft:8,bottomLeft:8})Column(){Text(this.getDaysNumber(day)).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)Text(day.isCountdown?倒数:正数).fontSize(10).fontColor(#FFFFFFCC)}}视觉效果┌─────┬──────────────────────────┐ │ │ 妈妈生日 │ │ 30 │ 2026年08月15日 │ │ 倒数 │ 还有 29 天 │ └─────┴──────────────────────────┘左侧色条使用重要日颜色天数数字和倒数文字显示在色条上方白色。六、颜色在日历月视图中的应用颜色圆点if(this.hasImportantDay(dateModel)){Row(){ForEach(this.getImportantDays(dateModel).slice(0,3),(day:ImportantDay){Circle({width:5,height:5}).fill(day.color)// 每个重要日的颜色.margin({right:2})})}.height(6).margin({top:2})}日期文字颜色privategetDayTextColor(dateModel:DateModel):string{if(this.vm.isDateSelect(dateModel.dayjsObj))return#FFFFFF;if(!dateModel.isCurrentMonth)return#CCCCCC;if(this.vm.isToday(dateModel.dayjsObj))returnthis.selectedColor;if(this.hasImportantDay(dateModel)){returnthis.getFirstDayColor(dateModel);// 重要日颜色}return#333333;}标题预览颜色Text(this.getFirstDayShortText(dateModel)).fontSize(8).fontColor(this.getFirstDayColor(dateModel))// 重要日颜色日历中的视觉效果┌────────┐ │ 15 │ ← 日期数字使用重要日颜色 │ ● ● │ ← 圆点使用各自重要日的颜色 │ 妈妈生日│ ← 标题预览使用第一个重要日的颜色 └────────┘七、颜色在日历年视图中的应用标记圆点if(this.hasImportantDay(dateModel)){Circle({width:4,height:4}).fill(this.getFirstDayColor(dateModel)).position({x:50%,y:2})}日期文字颜色privategetDayColor(dateModel:DateModel):string{if(!dateModel.isCurrentMonth)return#CCCCCC;if(this.vm.isToday(dateModel.dayjsObj))return#FF6B6B;if(this.hasImportantDay(dateModel)){returnthis.getFirstDayColor(dateModel);}return#333333;}年视图中的视觉效果┌─────┐ │ •15 │ ← 小圆点 日期数字都使用重要日颜色 └─────┘八、颜色与倒数/正数的联动按钮背景色Button(倒数 (还有X天)).fontColor(this.isCountdown?#FFFFFF:#666666).backgroundColor(this.isCountdown?this.selectedColor:#F5F5F5).onClick((){this.isCountdowntrue;})Button(正数 (已过X天)).fontColor(!this.isCountdown?#FFFFFF:#666666).backgroundColor(!this.isCountdown?this.selectedColor:#F5F5F5).onClick((){this.isCountdownfalse;})联动效果当用户选择不同颜色时选中状态的按钮背景色立即更新选择红色 #FF6B6B: ┌──────────────┐ ┌──────────────┐ │ 倒数(还有X天) │ │ 正数(已过X天) │ │ 白字红底 │ │ 灰字灰底 │ └──────────────┘ └──────────────┘ 切换为蓝色 #45B7D1: ┌──────────────┐ ┌──────────────┐ │ 倒数(还有X天) │ │ 正数(已过X天) │ │ 白字蓝底 │ │ 灰字灰底 │ └──────────────┘ └──────────────┘九、颜色在日历页卡片中的应用// CalendarPage 中的当日重要日卡片Row(){Column().width(4).height(40).backgroundColor(day.color)// 颜色条.borderRadius(2).margin({right:8})Column(){Text(day.title)Text(${DateUtil.getFullDateStr(day.targetDate)}·${day.getDisplayText()})}Text(day.isCountdown?倒数:正数).fontColor(day.isCountdown?#FF6B6B:#4ECDC4).backgroundColor(day.isCountdown?#FFF0F0:#E8FAF8)}倒数/正数标签颜色模式文字颜色背景颜色倒数#FF6B6B红#FFF0F0浅红正数#4ECDC4青#E8FAF8浅青十、颜色一致性的保证存储格式统一// 存储为十六进制字符串Tracecolor:string;// 构造函数默认值color:string#FF6B6B使用方式统一// 所有场景都直接使用字符串.backgroundColor(day.color).fill(day.color).fontColor(day.color)ArkUI 的颜色 API 统一接受十六进制字符串无需额外转换。十一、颜色选择器的交互体验实时预览链路用户点击颜色圆点 ↓ this.selectedColor color ↓ Local 变化 ↓ 预览方块背景色更新 ↓ 倒数/正数按钮背景色更新 ↓ 颜色值文本更新 ↓ 选中标记 ✓ 移动到新颜色所有更新都是实时的用户可以立即看到颜色效果无需点击保存才预览。十二、扩展性设计支持自定义颜色当前只支持预设颜色未来可以扩展自定义颜色选择器// 概念性扩展ColorPicker().onSelect((color:string){this.selectedColorcolor;})颜色分类可以为颜色添加分类标签interfaceColorOption{color:string;category:warm|cool|neutral;name:string;}颜色记忆可以记录用户最常用的颜色在颜色选择器中优先显示。十三、总结ImportantDays 的颜色系统设计16 色精心选择覆盖暖/冷/紫/中性四大色系全局一致性同一颜色贯穿卡片、日历、预览等所有场景实时预览颜色选择即时反馈提升用户体验联动设计颜色与倒数/正数模式联动增强视觉关联多级标记日历中通过圆点文字颜色双重标记重要日颜色不仅是视觉装饰更是信息传递的重要手段——用户一眼就能通过颜色识别不同的重要日。