HarmonyOS Next鸿蒙开发：Rating评分评星组件

本篇Codelab将引导开发者使用rating组件实现星级打分功能，经常在评分和显示评价星级时用，那么Rating组件，提供在给定范围内选择评分的组件。

Rating组件说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

从API version 9开始，该接口支持在ArkTS卡片中使用。

Rating(options?: { rating: number, indicator?: boolean })

参数

参数名：rating，参数类型：number，参数是否必填：是，参数作用：设置并接收评分值。默认值：0 取值范围： [0, stars]，规定：小于0取0，大于stars取最大值stars。

参数名：indicator，参数类型：boolean，参数是否必填：否，参数作用：设置评分组件作为指示器使用，不可改变评分。 默认值：false, 可进行评分 说明： indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。 indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

属性

属性名称：stars，属性类型：number，属性作用：设置评分总数。默认值：5 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明：设置为小于0的值时，按默认值显示。

属性名称：stepSize，属性类型：number，属性作用：操作评级的步长。 默认值：0.5 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置为小于0的值时，按默认值显示。 取值范围为[0.1, stars]。

属性名称：starStyle 属性类型： backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。 foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。 secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： startStyle属性所支持的图片类型能力参考Image组件。 支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。 默认图片加载方式为异步，暂不支持同步加载。 设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。

效果如下

完整代码

@Entry
@Component
struct RatingPage {
  @State rating: number=1 //设置并接收评分值。
  @State indicator: boolean=false //仅作为指示器使用，不可操作。
  build(){
    Flex({ direction: FlexDirection.Column,alignItems: ItemAlign.Center,justifyContent: FlexAlign.SpaceBetween })
    {
      Text('current score is '+ this.rating).fontSize(20)
      Rating({ rating: this.rating, indicator: this.indicator })//设置评星总数。
      .stars(5)//操作评级的步长
      .stepSize(0.5)
        .onChange((value: number)=> {
          this.rating = value
        })
    }.width(350).height(200).padding(35)
  }

  }