了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com本节讲解有两个评分栏组件基本使用方法评分：作为表单组件和作为展示组件。首先我们看Rating组件的接口、属性和事件说明：/***3.9Rating组件*Ratingbar组件。**接口：*Rating(options?:{rating:number,indicator?:boolean})*rating:number默认值为0，设置并接收评分值。*indicator:boolean默认值为false，仅作为指标使用，不可操作。**属性：*.stars(number)默认值为5，设置星星总数。*.stepSize(number)默认值为0.5，操作评分的步长。*.starStyle({*backgroundUri:string,//未选中星星的图片路径*foregroundUri:string,//选中星星的图片路径*secondaryUri?:string//部分选中星星的图片路径*})*图片路径可以可由用户自定义或使用系统默认图片，仅支持本地。**事件：*onChange(callback:(value:number)=>void)当操作评分条的星级发生变化时触发该回调。*/1。作为表单组件使用Rating组件作为表单组件使用时，通常需要配合onChange事件获取评分后的值，用于后续表单提交的参数值。接口参数rating必须提供，指标参数不需要提供。.stars、.stepSize、.starStyle这几个属性的默认值可以满足我们大部分场景下的需求，就不用提供了。示例代码如下：H8({text:'1.用作表单组件'})Row(){TextBody1({text:'请给客服打分'})Blank()Rating({rating:0}).onChange((value:number)=>{console.log('评分结果为：'+value.toString())})}.width('100%')在实际项目中，上面的H8和TextBody1可以改成文本资源调用（string.json）来满足多语言显示的需要。运行效果如下：2.作为显示组件使用Rating组件作为显示组件使用时，需要将接口参数indicator设置为true，使Rating组件无法运行。示例代码如下：H8({text:'2.用作展示组件'})Row(){TextBody1({text:'客服综合评分'})Blank()Rating({rating:3.7,indicator:true})//作为一个指标，使用.onChange((value:number)=>{console.log('评分结果为：'+value.toString())})}.width('100%')，效果如下：这里存在三个小问题：1、评分组件显示的最小粒度为0.5，不能代表3.7分，只能“四舍五入”后显示。3.7分与3.5分效果相同，3.8分与4分效果相同。2.指标赋值为true后，虽然点击后评分值不会改变，但是“五角星”变得很小。3、上面的代码中，我特意使用了onChange事件，发现仍然可以抓取score值，但是永远是3.5（最接近3.7的分数）。当然，在实际应用中，如果将Rating组件作为展示组件，就不要写onChange事件了。基于上述Beta版组件的不足，我的使用建议是不使用indicator参数，而是使用enabled属性来达到效果。代码如下：Row(){TextBody1({text:'ComprehensiveCustomerServiceRating'})Blank()Rating({rating:3.7})//不使用指标参数。enabled(false)//使用启用参数。onChange((value:number)=>{console.log('Scoringresultis:'+value.toString())})}.width('100%')现在外观恢复正常了，onChange事件完全无效。效果如下：OK，以上是一个小插曲，现在正式演示Rating组件作为展示组件的完整用法，代码如下：H8({text:'ComprehensiveRating'})Row(){TextBody1({text:'商品评分(4.4)'})Blank()Rating({rating:4.4}).enabled(false).stars(5)//设置评分总数stepSize(0.5)//操作rating的步长starStyle({backgroundUri:'/common/images/star_bg.png',//未选中的星图路径foregroundUri:'/common/images/star_fg.png',//选中的星图路径secondaryUri:'/common/images/star_2.png'//部分选中的星图路径})}.width('100%')Row(){TextBody1({text:'物流等级(3.7)'})Blank()评分({评分:3.7}).enabled(false).stars(5).stepSize(0.5).starStyle({backgroundUri:'/common/images/star_bg.png',foregroundUri:'/common/images/star_fg.png',secondaryUri:'/common/images/star_2.png'})}.width('100%')Row(){TextBody1({text:'客户服务评分(4.8)'})空白()评级（{评级：4.8}）.enabled（false）.stars（5）.stepSize（0.5）.starStyle（{backgroundUri：'/common/images/star_bg.png'，foregroundUri：'/common/images/star_fg。png',secondaryUri:'/common/images/star_2.png'})}.width('100%')效果如下：最后提醒一下，建议不要设置当前评分总数（使用默认值5）如果设置为10的话，你会发现Rating组件的宽度保持不变，但是图片会被压缩变形。源码地址：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent。了解更多开源信息，请访问：51CTO开源基础软件社区https://ost.51cto.com。
