第九节HarmonyOS 常用基础组件27-Rating

1、描述

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

2、接口

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

3、参数

参数名	参数类型	必填	描述
rating	number	是	设置并接收评分值。默认值：0；取值范围[0, stars]，小于0取0，大于stars取最大值stars。
indicator	boolean	否	设置评分组件作为指示器使用，不可改变评分。默认值：false，可进行评分。

4、属性

名称	参数类型	描述
stars	number	设置评分总数。默认值：5。设置为小于0的值时，按默认值显示。
stepSize	number	操作评级的步长。默认值：0.5。设置小于0的值时，按默认值显示。取值范围为[0.1, stars]。
starStyle	{ backgroundUri：string, foregroundUri: string, secondaryUri: string }	backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。 foregroundUri：选中的星级的图片路径，可由用户自定义或者使用系统默认图片。 secondaryUri：部分选中的星级的图片路径，可由用户自定义或者使用系统默认图片。

5、事件

名称：onChange(callback:(value:number) => void)

功能描述：操作评分条的评星发生改变时触发该回调。

6、示例

import router from '@ohos.router'

@Entry
@Component
struct RatingPage {
  @State message: string = '提供在给定范围内选择评分的组件。'
  @State ratingSize: number = 0;
  @State ratingCount: number = 0;

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Rating({ rating: 0, indicator: false })
            .stars(5)// 设置评分总数，默认值5
            .stepSize(0.5)//操作评级的步长,默认0.5
            .onChange((value: number) => {
              this.ratingSize = value;
            })

          Text(this.ratingSize.toString())
            .fontSize(20)
            .fontWeight(FontWeight.Bold)


          Rating({ rating: 0, indicator: false })
            .stars(10)// 设置评分总数，默认值5
            .stepSize(1)//操作评级的步长,默认0.5
            .onChange((value: number) => {
              this.ratingCount = value;
            })

          Text(this.ratingCount.toString())
            .fontSize(20)
            .fontWeight(FontWeight.Bold)


          Rating({ rating: 0, indicator: true })// indicator为true时评分不可修改
            .stars(5)// 设置评分总数，默认值5
            .stepSize(1) //操作评级的步长,默认0.5

          Rating({ rating: 0, indicator: false })
            .stars(5)
            .stepSize(1)
            .starStyle({
              backgroundUri: '/common/rating_default.png', // common目录与pages同级
              foregroundUri: '/common/rating_selected.png',
              secondaryUri: '/common/rating_selected.png'
            })

          Button("Rating文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/rating/RatingDesc",
              })
            })
            .margin({ top: 20 })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图