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、效果图