Rating

提供在给定范围内选择评分的组件。

说明:

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

子组件

接口

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

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

参数:

参数名 参数类型 必填 参数描述
rating number 设置并接收评分值。
默认值:0
取值范围: [0, stars]
小于0取0,大于stars取最大值stars。
从API version 10开始,该参数支持$$双向绑定变量。
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.1的值时,按默认值显示。
取值范围为[0.1, stars]。
starStyle {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
}
backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片。
foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片。
secondaryUri:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片。
从API version 9开始,该接口支持在ArkTS卡片中使用。
说明:
startStyle属性所支持的图片类型能力参考Image组件。
支持加载本地图片和网络图片,暂不支持PixelMap类型和Resource资源。
默认图片加载方式为异步,暂不支持同步加载。
backgroundUri或者foregroundUri设置为undefined或者空字符串时,rating会选择加载系统默认星型图源。
secondaryUri不设置或者设置的值为undefined或者空字符串时,优先设置为backgroundUri,效果上等同于只设置了foregroundUri、backgroundUri。

说明:

rating宽高为[width, height]时,单个图片的绘制区域为[width / stars, height]。

为了指定绘制区域为方形,建议自定义宽高时采取[height * stars, height], width = height * stars的方式。

事件

名称 功能描述
onChange(callback:(value: number) => void) 操作评分条的评星发生改变时触发该回调。
从API version 9开始,该接口支持在ArkTS卡片中使用。

键盘走焦规格

按键 功能描述
Tab 组件间切换焦点。
左右方向键 评分预览增加/减少(步长为step),不改变实际分值。
Home 移动到第一个星星, 不改变实际分值。
End 移动到最后一个星星, 不改变实际分值。
Space/Enter 根据当前评分提交评分结果。

示例

示例1

// xxx.ets
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5

  build() {
    Column() {
      Column() {
        Rating({ rating: this.rating, indicator: false })
          .stars(5)
          .stepSize(0.5)
          .margin({ top: 24 })
          .onChange((value: number) => {
            this.rating = value
          })
        Text('current score is ' + this.rating)
          .fontSize(16)
          .fontColor('rgba(24,36,49,0.60)')
          .margin({ top: 16 })
      }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })

      Row() {
        Image('common/testImage.jpg')
          .width(40)
          .height(40)
          .borderRadius(20)
          .margin({ left: 24 })
        Column() {
          Text('Yue')
            .fontSize(16)
            .fontColor('#182431')
            .fontWeight(500)
          Row() {
            Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
            Text('2021/06/02')
              .fontSize(10)
              .fontColor('#182431')
          }
        }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)

        Text('1st Floor')
          .fontSize(10)
          .fontColor('#182431')
          .position({ x: 295, y: 8 })
      }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

rating

示例2

// xxx.ets
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5

  build() {
    Column() {
      Rating({ rating: this.rating, indicator: false })
        .stars(5)
        .stepSize(0.5)
        .starStyle({
          backgroundUri: '/common/imag1.png', // common目录与pages同级
          foregroundUri: '/common/imag2.png',
          secondaryUri: '/common/imag3.png'
        })
        .margin({ top: 24 })
        .onChange((value: number) => {
          this.rating = value
        })
      Text('current score is ' + this.rating)
        .fontSize(16)
        .fontColor('rgba(24,36,49,0.60)')
        .margin({ top: 16 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

rating1