文章目录前言一、案例一商品详情页评分展示1.1 场景分析1.2 完整代码二、案例二多维度评价表单2.1 场景分析2.2 完整代码三、案例三内容热度评级面板3.1 场景分析3.2 完整代码四、参数速查手册五、常见问题与解决方案总结前言理解了 RcRate 的架构与各子系统之后本文将进入实战阶段——通过四个真实业务场景的完整案例展示如何把 HarmonyOS6RcRate 三方库插件的各项能力组合起来解决实际问题。每个案例都包含完整可运行代码和设计思路讲解可以直接复制到项目中使用。一、案例一商品详情页评分展示1.1 场景分析电商商品详情页通常需要展示综合评分只读、分项评分列表只读和数量统计。这类展示场景的特点是数据固定、无需交互、对视觉美观要求高。关键设计决策使用rcRateDisabled: true禁用交互使用rcRateAllowHalf: true支持小数分值展示使用RcRateSize.SMALL配合紧凑布局分项评分用rcRateShowScore 自定义模板1.2 完整代码import{RcRate,RcRateSize,RcRateColors}fromrchoui;interfaceRcProductRatingItem{label:string;score:number;}EntryComponentstruct RcProductRatingPage{privatercOverallScore:number4.6;privatercRatingCount:number2847;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}fromrchoui;interfaceRcEvaluationFormData{service:number;quality:number;speed:number;average:string;}EntryComponentstruct RcEvaluationFormPage{StatercServiceScore:number0;StatercQualityScore:number0;StatercSpeedScore:number0;StatercSubmitted:booleanfalse;privategetrcIsFormValid():boolean{returnthis.rcServiceScore0this.rcQualityScore0this.rcSpeedScore0;}privategetrcAverageScore():string{if(!this.rcIsFormValid)return--;return((this.rcServiceScorethis.rcQualityScorethis.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.rcSubmittedtrue;}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.rcServiceScorev;})this.rcBuildScoreRow(商品质量,this.rcQualityScore,(v:number){this.rcQualityScorev;})this.rcBuildScoreRow(配送速度,this.rcSpeedScore,(v:number){this.rcSpeedScorev;})// 综合均分预览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}fromrchoui;interfaceRcContentItem{id:string;title:string;hotness:number;likeCount:number;}EntryComponentstruct 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% 的使用场景场景关键参数组合只读展示整星rcRateDisabled: true只读展示小数rcRateDisabled: true, rcRateAllowHalf: true只读展示带分数rcRateDisabled: true, rcRateAllowHalf: true, rcRateShowScore: true交互评分基础rcRateOnChange交互评分半星rcRateAllowHalf: true, rcRateOnChange带文字描述rcRateShowText: true, rcRateTexts: [...]渐变颜色rcRateActiveColor: RcRateColors.GRADIENT, rcRateLowThreshold, rcRateHighThreshold自定义图标rcRateIconActive: icon-houi_xxx, rcRateIconVoid: icon-houi_xxx_outline表单必填rcRateMinCount: 1可撤销rcRateClearable: true大尺寸rcRateSize: RcRateSize.LARGE, rcRateGutter: 1210星制rcRateMax: 10, rcRateSize: 20, rcRateGutter: 6五、常见问题与解决方案Q评分后界面没有更新RcRate使用ComponentV2父组件的状态变量必须使用State装饰并在rcRateOnChange回调中赋值StatercScore:number0;RcRate({rcRateValue:this.rcScore,rcRateOnChange:(value:number){this.rcScorevalue;// 必须赋值给 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 应用开发中绝大多数评分需求真正做到开箱即用、深度可定制。