文章目录前言一、尺寸体系设计1.1 三档预设尺寸枚举1.2 间距参数 rcRateGutter1.3 尺寸与间距的联动原则二、视觉渲染机制2.1 Stack 叠层渲染架构2.2 填充比例计算2.3 禁用状态的视觉处理三、辅助文字与分数展示3.1 两种文字展示模式3.2 文字定位与样式四、完整示例总结前言UI 组件的样式系统是决定其适用范围的关键因素。一个优秀的评分组件不应该把尺寸和间距固定死而应该提供足够的配置灵活性以适配从信息列表小角标到全屏评价页大按钮的各类场景。HarmonyOS6RcRate 三方库插件在样式设计上颇具匠心本文将对其尺寸体系、间距规则和视觉渲染机制进行全面拆解。一、尺寸体系设计1.1 三档预设尺寸枚举RcRate 提供了RcRateSize枚举覆盖三种最常见的尺寸需求枚举值数值vp典型使用场景RcRateSize.SMALL18列表行内展示、卡片角标RcRateSize.DEFAULT24正文区域、表单字段RcRateSize.LARGE32评价主体区、焦点展示枚举值直接等于 vp 数值这意味着rcRateSize参数可以无缝接受枚举或任意整数// 使用枚举预设RcRate({rcRateValue:4,rcRateSize:RcRateSize.SMALL,rcRateDisabled:true})// 使用自定义数值28vpRcRate({rcRateValue:4,rcRateSize:28,rcRateGutter:10})提示rcRateDisabled: true将组件设为只读模式适合在展示场景中固定分数避免用户误操作。1.2 间距参数 rcRateGutterrcRateGutter控制相邻星星之间的像素间隔默认值为 8vp。间距的设置会直接影响整个评分区域的宽度计算总宽度 rcRateMax × (rcRateSize rcRateGutter) - rcRateGutter组件在处理触摸滑动时也依赖这个公式反向计算当前手指位置对应的评分// 源码中的触摸位置换算conststarTotalWidththis.rcRateSizethis.rcRateGutter;letvalueMath.floor(x/starTotalWidth)1;不同尺寸和间距的组合对比rcRateSizercRateGutter5星总宽度186114vp248152vp3212212vp206126vp10星206vp1.3 尺寸与间距的联动原则当rcRateSize增大时rcRateGutter也应适当放大保持视觉比例协调。一般建议间距约为尺寸的 30%~40%。主要特点尺寸枚举直接等于 vp 数值与自定义数值无缝混用间距影响触摸位置计算尺寸改变时应同步调整最后一个星星不添加右间距避免容器右侧多余空白二、视觉渲染机制2.1 Stack 叠层渲染架构单颗星星的渲染采用Stack 叠层方案将背景图层未选中和前景图层选中叠加Stack星星容器 ├── 底层void 图标灰色 └── 顶层active 图标彩色裁剪为对应比例宽度这种设计的核心优势在于处理半星时无需两套图标资源——通过对前景图层做宽度裁剪clip(true)即可精确展示任意填充比例Row(){// 渲染选中图标}.width(${this.getRcRateStarFillRatio(index)*100}%).clip(true).alignItems(VerticalAlign.Center)2.2 填充比例计算getRcRateStarFillRatio(index)是渲染的核心计算函数返回 0空、0~1半、1满三种状态条件返回值渲染效果currentValue index1完整显示选中图标index-1 currentValue indexcurrentValue - (index-1)按比例裁剪currentValue index-10只显示 void 图标对于rcRateValue 3.5第 4 颗星的填充比例 3.5 - 3 0.5即显示一半宽度的选中图标。2.3 禁用状态的视觉处理禁用状态通过对整个星星容器设置透明度实现保持图标颜色不变仅降低整体亮度.opacity(this.rcRateDisabled?0.5:1)这种做法比修改颜色更简洁也能保持分段颜色等复杂样式的一致性。提示禁用状态下透明度降为 0.5在浅色背景上效果自然。若背景较深可考虑通过自定义rcRateVoidColor来强化对比度。三、辅助文字与分数展示3.1 两种文字展示模式RcRate 提供两种互补的文字展示方式模式一分数模板rcRateShowScore通过rcRateScoreTemplate定义模板{value}占位符会被替换为当前分值RcRate({rcRateValue:this.score,rcRateAllowHalf:true,rcRateShowScore:true,rcRateScoreTemplate:{value}/5.0})模式二描述文字rcRateShowText针对每个整数分值配置对应的描述文字数组RcRate({rcRateValue:this.score,rcRateShowText:true,rcRateTexts:[极差,失望,一般,满意,惊喜]})3.2 文字定位与样式文字区域跟随星星容器水平排列固定左侧外边距 12vpText(this.getRcRateText()).fontSize(14).fontColor(this.rcRateTextColor).margin({left:12})文字颜色通过rcRateTextColor独立控制默认值#1F2329与深色文字规范一致。参数类型默认值说明rcRateShowScorebooleanfalse显示数值分数rcRateScoreTemplatestring{value}分数模板字符串rcRateShowTextbooleanfalse显示描述文字rcRateTextsstring[][]描述文字数组rcRateTextColorstring#1F2329文字颜色四、完整示例下面的示例完整演示了各类尺寸配置和文字展示效果可直接在工程中运行import{RcRate,RcRateSize,RcRateColors}fromrchoui;EntryComponentstruct RcRateSizeDemo{StatercScore28:number3;StatercScoreText:number2;StatercScoreTemplate:number4;StatercScore10:number7;build(){Scroll(){Column({space:16}){Text(RcRate 样式与尺寸示例).fontSize(20).fontWeight(FontWeight.Bold).margin({top:8,bottom:4})// 三档预设尺寸对比只读展示Column({space:16}){Text(三档预设尺寸).fontSize(16).fontWeight(FontWeight.Medium)Row({space:16}){Column({space:6}){Text(SMALL 18vp).fontSize(12).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateSize:RcRateSize.SMALL,rcRateDisabled:true})}Column({space:6}){Text(DEFAULT 24vp).fontSize(12).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateSize:RcRateSize.DEFAULT,rcRateDisabled:true})}Column({space:6}){Text(LARGE 32vp).fontSize(12).fontColor(#8F959E)RcRate({rcRateValue:4,rcRateSize:RcRateSize.LARGE,rcRateDisabled:true})}}.width(100%)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 自定义尺寸与间距Column({space:12}){Text(自定义尺寸 28vp / 间距 10vp).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcScore28,rcRateSize:28,rcRateGutter:10,rcRateActiveColor:RcRateColors.ORANGE,rcRateShowScore:true,rcRateOnChange:(value:number){this.rcScore28value;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 辅助文字模式Column({space:12}){Text(辅助文字模式).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcScoreText,rcRateShowText:true,rcRateTexts:[极差,失望,一般,满意,惊喜],rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:2,rcRateHighThreshold:4,rcRateOnChange:(value:number){this.rcScoreTextvalue;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 分数模板模式Column({space:12}){Text(分数模板模式).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcScoreTemplate,rcRateAllowHalf:true,rcRateShowScore:true,rcRateScoreTemplate:{value} / 5.0 分,rcRateOnChange:(value:number){this.rcScoreTemplatevalue;}})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12)// 10 星评分 小尺寸Column({space:12}){Text(10星评分size 20 / gutter 6).fontSize(14).fontColor(#646A73)RcRate({rcRateValue:this.rcScore10,rcRateMax:10,rcRateSize:20,rcRateGutter:6,rcRateShowScore:true,rcRateScoreTemplate:{value}/10,rcRateActiveColor:RcRateColors.GRADIENT,rcRateLowThreshold:3,rcRateHighThreshold:7,rcRateOnChange:(value:number){this.rcScore10value;}})}.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 的样式系统通过三档枚举预设 自定义数值的双轨设计兼顾了开箱即用的便利性和深度定制的灵活性。Stack 叠层裁剪渲染机制是半星展示的核心间距参数不仅影响视觉还直接参与触摸坐标换算。理解这套样式体系开发者可以精确控制 RcRate 在任意场景下的呈现效果。