文章目录前言一、颜色参数体系1.1 双色基础配置1.2 activeColor 的三种形态二、分段颜色机制深度解析2.1 三区间分段逻辑2.2 分段颜色的实时切换三、预设颜色方案详解3.1 RcRateColors 预设类3.2 各方案适用场景四、自定义颜色实战4.1 单色主题定制4.2 自定义三色渐变五、完整示例总结前言颜色是用户情感传递的重要媒介。在评分场景中红色传递紧迫感金黄色传递价值感从冷到暖的渐变则能直观地表达评分高低的情感差异。HarmonyOS6RcRate 三方库插件的颜色系统经过精心设计支持单色配置、三色分段渐变和多种预设主题本文将深入剖析其实现机制与应用技巧。一、颜色参数体系1.1 双色基础配置RcRate 将星星的颜色状态分为两个独立参数参数说明默认值rcRateVoidColor未选中星星颜色#C6D1DE浅蓝灰rcRateActiveColor选中星星颜色#F7BA2A金黄未选中颜色始终为单一颜色而选中颜色则支持三种类型的值这正是颜色系统的核心设计。1.2 activeColor 的三种形态rcRateActiveColor的类型定义为string | ResourceColor | Arraystring | ResourceColor三种形态对应不同的使用场景形态一字符串单色rcRateActiveColor:#FA3534// 红色主题rcRateActiveColor:#FF9900// 橙色主题形态二HarmonyOS 资源颜色rcRateActiveColor:$r(app.color.brand_primary)形态三颜色数组分段渐变rcRateActiveColor:[#99A9BF,#F7BA2A,#FF9900]// 数组索引[低分颜色, 中分颜色, 高分颜色]提示当rcRateActiveColor为数组时必须同时配置rcRateLowThreshold和rcRateHighThreshold来定义分段边界否则使用默认的 2 和 4。二、分段颜色机制深度解析2.1 三区间分段逻辑源码中getRcRateColorByValue方法实现了分段颜色的核心逻辑privategetRcRateColorByValue(value:number):string|ResourceColor{if(Array.isArray(this.rcRateActiveColor)){if(valuethis.rcRateLowThreshold){returnthis.rcRateActiveColor[0];// 低分区颜色}elseif(valuethis.rcRateHighThreshold){returnthis.rcRateActiveColor[1];// 中分区颜色}else{returnthis.rcRateActiveColor[2];// 高分区颜色}}returnthis.rcRateActiveColorasstring|ResourceColor;}以rcRateMax5, rcRateLowThreshold2, rcRateHighThreshold4为例分段效果如下分值范围使用颜色语义1 ~ 2colors[0]低分区3 ~ 4colors[1]中分区5colors[2]高分区2.2 分段颜色的实时切换注意颜色切换是逐星独立计算的每颗星的颜色由其自身的 index 值1~N传入getRcRateColorByValue决定而不是整体评分。这意味着在同一个评分状态下可能同时显示多种颜色的星星。例如评分为 3lowThreshold2, highThreshold4时第 1、2 颗星index1,2属于低分区使用colors[0]第 3 颗星index3属于中分区使用colors[1]第 4、5 颗星未选中使用rcRateVoidColor这种设计让渐变效果更加直观用户能一眼看到分值的位置。三、预设颜色方案详解3.1 RcRateColors 预设类exportclassRcRateColors{staticreadonlyDEFAULT#F7BA2A;staticreadonlyGRADIENT[#99A9BF,#F7BA2A,#FF9900];staticreadonlyELEMENT[#409EFF,#67C23A,#FF9900];staticreadonlyRED#FA3534;staticreadonlyORANGE#FF9900;staticreadonlyGOLD#FADB14;}3.2 各方案适用场景GRADIENT灰-金-橙最通用的渐变方案。灰色传递低分失望感金色代表中等水平橙色强调高分优秀。适合通用商品评价场景。ELEMENT蓝-绿-橙参考 Element Plus 组件库设计风格蓝色表示冷静一般绿色表示还不错橙色表示很棒。适合数据类或企业应用。RED / ORANGE单色主题适合需要品牌一致性的场景如平台统一红色、商城橙色等。GOLD纯金色略比 DEFAULT 更亮适合高端感强的设计风格。核心优势开箱即用的预设方案无需手动调色均经过视觉设计验证在 HarmonyOS 设备上显示效果稳定可直接传入或作为基础进行微调四、自定义颜色实战4.1 单色主题定制// 品牌红色主题RcRate({rcRateValue:this.score,rcRateActiveColor:#E63946,rcRateVoidColor:#FADADD,rcRateOnChange:(value:number){this.scorevalue;}})4.2 自定义三色渐变根据业务含义自定义分段颜色数组// 信用评级红(危险)-黄(警告)-绿(良好)RcRate({rcRateValue:this.creditScore,rcRateMax:5,rcRateActiveColor:[#FA3534,#FAAD14,#52C41A],rcRateLowThreshold:1,// 1分为低分rcRateHighThreshold:3,// 4-5分为高分rcRateOnChange:(value:number){this.creditScorevalue;}})提示分段边界lowThreshold和highThreshold的设置要与rcRateMax相匹配。例如 10 星评分建议lowThreshold3, highThreshold7。五、完整示例以下示例集中展示了 RcRate 颜色系统的各种配置可直接运行import{RcRate,RcRateColors}fromrchoui;EntryComponentstruct RcRateColorDemo{StatercGradientScore:number2;StatercElementScore:number3;StatercCustomScore:number4;StatercCreditScore:number2;build(){Scroll(){Column({space:16}){Text(RcRate 颜色系统示例).fontSize(20).fontWeight(FontWeight.Bold).margin({top:8,bottom:4})// 预设GRADIENT 三色渐变Column({space:12}){Text(GRADIENT 三色渐变灰-金-橙).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcGradientScore,rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:2,rcRateHighThreshold:4,rcRateShowScore:true,rcRateOnChange:(value:number){this.rcGradientScorevalue;}})Text(拨动评分观察颜色随分值变化).fontSize(11).fontColor(#8F959E)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 预设ELEMENT 风格Column({space:12}){Text(ELEMENT 风格蓝-绿-橙).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcElementScore,rcRateActiveColor:RcRateColors.ELEMENT,rcRateLowThreshold:2,rcRateHighThreshold:4,rcRateShowScore:true,rcRateOnChange:(value:number){this.rcElementScorevalue;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 自定义橙色主题 浅橙底色Column({space:12}){Text(自定义橙色主题).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcCustomScore,rcRateActiveColor:#FF6B35,rcRateVoidColor:#FFD5C2,rcRateShowScore:true,rcRateScoreTemplate:{value} 分,rcRateOnChange:(value:number){this.rcCustomScorevalue;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 自定义信用评级红-黄-绿Column({space:12}){Text(信用评级主题红-黄-绿).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcCreditScore,rcRateActiveColor:[#FA3534,#FAAD14,#52C41A],rcRateLowThreshold:1,rcRateHighThreshold:3,rcRateShowText:true,rcRateTexts:[危险,较差,一般,良好,优秀],rcRateOnChange:(value:number){this.rcCreditScorevalue;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 只读展示各预设颜色对比Column({space:16}){Text(预设颜色对比只读).fontSize(14).fontColor(#646A73)Row({space:0}){Text(RED).fontSize(12).width(80).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateDisabled:true,rcRateActiveColor:RcRateColors.RED})}Row({space:0}){Text(ORANGE).fontSize(12).width(80).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateDisabled:true,rcRateActiveColor:RcRateColors.ORANGE})}Row({space:0}){Text(GOLD).fontSize(12).width(80).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateDisabled:true,rcRateActiveColor:RcRateColors.GOLD})}Row({space:0}){Text(DEFAULT).fontSize(12).width(80).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateDisabled:true,rcRateActiveColor:RcRateColors.DEFAULT})}}.alignItems(HorizontalAlign.Start).width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)Text().height(20)}.padding({left:16,right:16,top:16,bottom:16}).width(100%)}.width(100%).height(100%).backgroundColor(#F5F6F7)}}总结RcRate 的颜色系统以联合类型实现了从简单到复杂的平滑过渡单色配置满足品牌统一需求三色数组支持情感化渐变设计。分段颜色机制按每颗星独立计算颜色使得视觉反馈更加直观。配合RcRateColors预设类开发者可以在几行代码内实现专业级的评分视觉效果。