HarmonyOS6 三方库插件实战：RcRate 评分组件实战案例集与应用开发指南

前言

理解了 RcRate 的架构与各子系统之后，本文将进入实战阶段——通过四个真实业务场景的完整案例，展示如何把 HarmonyOS6RcRate 三方库插件的各项能力组合起来解决实际问题。每个案例都包含完整可运行代码和设计思路讲解，可以直接复制到项目中使用。

一、案例一：商品详情页评分展示

1.1 场景分析

电商商品详情页通常需要展示综合评分（只读）、分项评分列表（只读）和数量统计。这类展示场景的特点是数据固定、无需交互、对视觉美观要求高。

关键设计决策：

• 使用rcRateDisabled: true禁用交互
• 使用rcRateAllowHalf: true支持小数分值展示
• 使用RcRateSize.SMALL配合紧凑布局
• 分项评分用rcRateShowScore+ 自定义模板

1.2 完整代码

import{RcRate,RcRateSize,RcRateColors}from'rchoui';interfaceRcProductRatingItem{label:string;score:number;}@Entry@Componentstruct RcProductRatingPage{privatercOverallScore:number=4.6;privatercRatingCount:number=2847;privatercRatingItems:RcProductRatingItem[]=[{label:'商品质量',score:4.8},{label:'物流速度',score:4.5},{label:'服务态度',score:4.6},{label:'包装完好',score:4.9},];build(){Column({space:0}){// 综合评分区Row({space:16}){Column({space:4}){Text(`${this.rcOverallScore}`).fontSize(48).fontWeight(FontWeight.Bold).fontColor('#FF9900')RcRate({rcRateValue:this.rcOverallScore,rcRateDisabled:true,rcRateAllowHalf:true,rcRateSize:RcRateSize.DEFAULT,rcRateActiveColor:RcRateColors.ORANGE,})Text(`${this.rcRatingCount}条评价`).fontSize(12).fontColor('#8F959E')}.alignItems(HorizontalAlign.Center)// 分项评分列表Column({space:12}){ForEach(this.rcRatingItems,(item:RcProductRatingItem)=>{Row({space:8}){Text(item.label).fontSize(13).fontColor('#646A73').width(64)RcRate({rcRateValue:item.score,rcRateDisabled:true,rcRateAllowHalf:true,rcRateSize:RcRateSize.SMALL,rcRateActiveColor:RcRateColors.ORANGE,})Text(`${item.score}`).fontSize(13).fontColor('#FF9900').fontWeight(FontWeight.Medium)}.alignItems(VerticalAlign.Center)},(item:RcProductRatingItem)=>item.label)}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').padding(20).backgroundColor('#FFFFFF').alignItems(VerticalAlign.Center)}.width('100%').backgroundColor('#F5F6F7')}}

提示：只读展示场景不需要传入rcRateOnChange，省略即可。组件内部会跳过所有事件绑定逻辑。

二、案例二：多维度评价表单

2.1 场景分析

用户提交订单评价时，通常需要对多个维度分别打分，并满足以下业务规则：

• 每个维度至少选一颗星（rcRateMinCount: 1）
• 提供对应的文字描述辅助用户选择（rcRateShowText）
• 所有维度完成后才能提交（表单验证）
• 显示综合均分（动态计算）

2.2 完整代码

import{RcRate,RcRateColors}from'rchoui';interfaceRcEvaluationFormData{service:number;quality:number;speed:number;average:string;}@Entry@Componentstruct RcEvaluationFormPage{@StatercServiceScore:number=0;@StatercQualityScore:number=0;@StatercSpeedScore:number=0;@StatercSubmitted:boolean=false;privategetrcIsFormValid():boolean{returnthis.rcServiceScore>0&&this.rcQualityScore>0&&this.rcSpeedScore>0;}privategetrcAverageScore():string{if(!this.rcIsFormValid)return'--';return((this.rcServiceScore+this.rcQualityScore+this.rcSpeedScore)/3).toFixed(1);}privatercTexts:string[]=['极差','失望','一般','满意','惊喜'];privatercSubmitEvaluation():void{constdata:RcEvaluationFormData={service:this.rcServiceScore,quality:this.rcQualityScore,speed:this.rcSpeedScore,average:this.rcAverageScore};console.log('提交评价数据:',JSON.stringify(data));this.rcSubmitted=true;}@BuilderrcBuildScoreRow(label:string,score:number,onChange:(v:number)=>void){Row({space:0}){Text(label).fontSize(15).fontColor('#1F2329').width(80)RcRate({rcRateValue:score,rcRateMinCount:1,rcRateShowText:true,rcRateTexts:this.rcTexts,rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:2,rcRateHighThreshold:4,rcRateOnChange:onChange})}.width('100%').alignItems(VerticalAlign.Center)}build(){Scroll(){Column({space:0}){// 标题Text('评价订单').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1F2329').margin({top:24,bottom:20})if(!this.rcSubmitted){// 评分表单Column({space:24}){this.rcBuildScoreRow('服务态度',this.rcServiceScore,(v:number)=>{this.rcServiceScore=v;})this.rcBuildScoreRow('商品质量',this.rcQualityScore,(v:number)=>{this.rcQualityScore=v;})this.rcBuildScoreRow('配送速度',this.rcSpeedScore,(v:number)=>{this.rcSpeedScore=v;})// 综合均分预览if(this.rcIsFormValid){Row({space:8}){Text('综合评分：').fontSize(14).fontColor('#646A73')Text(this.rcAverageScore).fontSize(22).fontWeight(FontWeight.Bold).fontColor('#FF9900')Text('分').fontSize(14).fontColor('#646A73')}.width('100%').padding({top:12,bottom:4})}// 提交按钮Button('提交评价').width('100%').height(48).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(this.rcIsFormValid?'#3370FF':'#C6D1DE').borderRadius(10).enabled(this.rcIsFormValid).onClick(()=>{this.rcSubmitEvaluation();})if(!this.rcIsFormValid){Text('请为所有维度评分后提交').fontSize(12).fontColor('#8F959E').textAlign(TextAlign.Center).width('100%')}}.width('100%').padding(20).backgroundColor('#FFFFFF').borderRadius(16)}else{// 提交成功状态Column({space:16}){Text('评价已提交').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#52C41A')RcRate({rcRateValue:parseFloat(this.rcAverageScore),rcRateDisabled:true,rcRateAllowHalf:true,rcRateSize:32,rcRateActiveColor:RcRateColors.ORANGE,rcRateShowScore:true,rcRateScoreTemplate:'综合 {value} 分'})}.width('100%').padding(40).backgroundColor('#FFFFFF').borderRadius(16).alignItems(HorizontalAlign.Center)}Text('').height(40)}.padding({left:16,right:16}).width('100%').alignItems(HorizontalAlign.Center)}.width('100%').height('100%').backgroundColor('#F5F6F7')}}

三、案例三：内容热度评级面板

3.1 场景分析

社区内容、新闻资讯等场景需要显示内容热度，通常有以下特点：

• 分值可能是小数（均值计算）
• 用特定图标（如心形）强化视觉记忆
• 需要在列表中紧凑展示，尺寸较小
• 用颜色传递情感（冷色=冷清，暖色=火爆）

3.2 完整代码

import{RcRate,RcRateSize,RcRateColors}from'rchoui';interfaceRcContentItem{id:string;title:string;hotness:number;likeCount:number;}@Entry@Componentstruct RcContentHotnessList{privatercContents:RcContentItem[]=[{id:'1',title:'HarmonyOS6 新特性全解析',hotness:4.8,likeCount:3256},{id:'2',title:'ArkUI 声明式开发最佳实践',hotness:4.2,likeCount:1892},{id:'3',title:'鸿蒙应用性能优化指南',hotness:3.5,likeCount:987},{id:'4',title:'从零搭建组件库的思路',hotness:2.1,likeCount:412},{id:'5',title:'入门 ArkTS 踩坑记录',hotness:1.5,likeCount:230},];@BuilderrcBuildContentCard(item:RcContentItem){Row({space:12}){// 内容信息Column({space:6}){Text(item.title).fontSize(15).fontColor('#1F2329').fontWeight(FontWeight.Medium).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Row({space:8}){// 热度评分RcRate({rcRateValue:item.hotness,rcRateDisabled:true,rcRateAllowHalf:true,rcRateSize:RcRateSize.SMALL,rcRateIconActive:'icon-houi_heart',rcRateIconVoid:'icon-houi_heart_outline',rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:2,rcRateHighThreshold:4,})Text(`${item.hotness}`).fontSize(13).fontColor('#FF9900').fontWeight(FontWeight.Medium)Text(`${item.likeCount}赞`).fontSize(12).fontColor('#8F959E')}.alignItems(VerticalAlign.Center)}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').padding(16).backgroundColor('#FFFFFF').borderRadius(12).alignItems(VerticalAlign.Center)}build(){Scroll(){Column({space:12}){Text('内容热度排行').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#1F2329').margin({top:16,bottom:4})ForEach(this.rcContents,(item:RcContentItem)=>{this.rcBuildContentCard(item);},(item:RcContentItem)=>item.id)Text('').height(20)}.padding({left:16,right:16}).width('100%')}.width('100%').height('100%').backgroundColor('#F5F6F7')}}

四、参数速查手册

在实际开发中，以下参数组合覆盖了 80% 的使用场景：

五、常见问题与解决方案

Q：评分后界面没有更新？

RcRate使用@ComponentV2，父组件的状态变量必须使用@State装饰，并在rcRateOnChange回调中赋值：

@StatercScore:number=0;RcRate({rcRateValue:this.rcScore,rcRateOnChange:(value:number)=>{this.rcScore=value;// 必须赋值给 @State 变量}})

Q：半星展示不正确？

展示小数分值时需要同时开启rcRateAllowHalf: true，否则组件会按整数渲染：

RcRate({rcRateValue:3.5,rcRateAllowHalf:true,// 必须开启才能显示半星rcRateDisabled:true})

Q：渐变颜色不生效？

使用数组颜色时，阈值参数是必需的：

RcRate({rcRateValue:this.score,rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:2,// 不能省略rcRateHighThreshold:4,// 不能省略})

总结

RcRate 三方库插件通过合理的参数设计，将商品展示、表单录入、内容标注等常见评分场景的实现复杂度大幅降低。掌握三个核心参数组合——只读展示（rcRateDisabled）、半星模式（rcRateAllowHalf）、渐变颜色（rcRateActiveColor数组）——就能覆盖 HarmonyOS6 应用开发中绝大多数评分需求，真正做到开箱即用、深度可定制。