HarmonyOS6 三方库插件实战：RcRate 评分组件颜色系统与分段渐变机制深度解析

前言

颜色是用户情感传递的重要媒介。在评分场景中，红色传递紧迫感，金黄色传递价值感，从冷到暖的渐变则能直观地表达评分高低的情感差异。HarmonyOS6RcRate 三方库插件的颜色系统经过精心设计，支持单色配置、三色分段渐变和多种预设主题，本文将深入剖析其实现机制与应用技巧。

一、颜色参数体系

1.1 双色基础配置

RcRate 将星星的颜色状态分为两个独立参数：

未选中颜色始终为单一颜色，而选中颜色则支持三种类型的值，这正是颜色系统的核心设计。

1.2 activeColor 的三种形态

rcRateActiveColor的类型定义为string | ResourceColor | Array<string | 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(value<=this.rcRateLowThreshold){returnthis.rcRateActiveColor[0];// 低分区颜色}elseif(value<=this.rcRateHighThreshold){returnthis.rcRateActiveColor[1];// 中分区颜色}else{returnthis.rcRateActiveColor[2];// 高分区颜色}}returnthis.rcRateActiveColorasstring|ResourceColor;}

以rcRateMax=5, rcRateLowThreshold=2, rcRateHighThreshold=4为例，分段效果如下：

2.2 分段颜色的实时切换

注意颜色切换是逐星独立计算的：每颗星的颜色由其自身的 index 值（1~N）传入getRcRateColorByValue决定，而不是整体评分。这意味着在同一个评分状态下，可能同时显示多种颜色的星星。

例如评分为 3（lowThreshold=2, highThreshold=4）时：

• 第 1、2 颗星：index=1,2，属于低分区，使用colors[0]
• 第 3 颗星：index=3，属于中分区，使用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.score=value;}})

4.2 自定义三色渐变

根据业务含义自定义分段颜色数组：

// 信用评级：红(危险)-黄(警告)-绿(良好)RcRate({rcRateValue:this.creditScore,rcRateMax:5,rcRateActiveColor:['#FA3534','#FAAD14','#52C41A'],rcRateLowThreshold:1,// 1分为低分rcRateHighThreshold:3,// 4-5分为高分rcRateOnChange:(value:number)=>{this.creditScore=value;}})

提示：分段边界lowThreshold和highThreshold的设置要与rcRateMax相匹配。例如 10 星评分建议lowThreshold=3, highThreshold=7。

五、完整示例

以下示例集中展示了 RcRate 颜色系统的各种配置，可直接运行：

import{RcRate,RcRateColors}from'rchoui';@Entry@Componentstruct RcRateColorDemo{@StatercGradientScore:number=2;@StatercElementScore:number=3;@StatercCustomScore:number=4;@StatercCreditScore:number=2;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.rcGradientScore=value;}})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.rcElementScore=value;}})}.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.rcCustomScore=value;}})}.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.rcCreditScore=value;}})}.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预设类，开发者可以在几行代码内实现专业级的评分视觉效果。