鸿蒙：使用Rating组件实现五角星打分评价

2501_919749032025-10-11 18:32

1、前言

我们经常会在app上打分，在鸿蒙中可以使用Rating组件实现这一功能。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-ratinghttps://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-rating

3、核心代码

复制代码

        Rating({ rating: this.fiveRating, indicator: false })
            .stars(5) // 设置评分星星的总数为5颗
            .stepSize(0.5) // 设置评分的步长为0.5，即每次可增减0.5分
            .onChange((value: number) => { // 评分变化时的回调事件
              this.fiveRating = value;
            })

4、运行效果

5、完整代码

Index.ets

复制代码

@Entry
@ComponentV2
struct Index {
  // rating 用于存储当前评分值，初始化为3.5
  @Local fiveRating: number = 0;
  @Local tenRating: number = 0;

  // build方法是组件的UI构建入口，用于定义组件的布局和内容
  build() {
    // 外层Column布局：占满整个屏幕空间，作为根容器
    Column() {
      // 内层Column布局：设置固定宽高，用于容纳评分组件和文本显示
      Column({ space: 20 }) {

        Column({ space: 10 }) {
          Image($rawfile("pingguo.png"))
            .width("50%")
          Text("苹果：满分五分，你给------" + this.fiveRating + "分")
            .fontSize(20)

          Rating({ rating: this.fiveRating, indicator: false })
            .stars(5) // 设置评分星星的总数为5颗
            .stepSize(0.5) // 设置评分的步长为0.5，即每次可增减0.5分
            .onChange((value: number) => { // 评分变化时的回调事件
              this.fiveRating = value;
            })
        }

        Column({ space: 10 }) {
          Image($rawfile("huawei.jpg"))
            .width("50%")
          Text("华为：满分十分，你给------" + this.tenRating + "分")
            .fontSize(20)
          Rating({ rating: this.tenRating, indicator: false })
            .stars(10) // 设置评分星星的总数为5颗
            .stepSize(0.5) // 设置评分的步长为0.5，即每次可增减0.5分
            .onChange((value: number) => { // 评分变化时的回调事件
              this.tenRating = value;
            })
        }

      }

    }
    .width('100%') // 外层Column宽度占满父容器（屏幕）
    .height('100%') // 外层Column高度占满父容器（屏幕）
  }
}

觉得有帮助可以点赞或收藏