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

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高度占满父容器（屏幕）}
}

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