HarmonyOS-UIAbitity-Rating——【坚果派-红目香薰】
摘要
作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。
目录
摘要
HarmonyOS-UIAbitity-Rating
接口
属性
事件
示例代码
HarmonyOS-UIAbitity-Rating
提供在给定范围内选择评分的组件。
接口
Rating(options?: { rating: number, indicator?: boolean })
参数：
|
参数名 |
参数类型 |
必填 |
默认值 |
参数描述 |
|
|
rating |
number |
是 |
0 |
设置并接收评分值。 |
|
|
indicator |
boolean |
否 |
false |
仅作为指示器使用，不可操作。 |
属性
|
名称 |
参数类型 |
默认值 |
描述 |
|
|
stars |
number |
5 |
设置评星总数。 |
|
|
stepSize |
number |
0.5 |
操作评级的步长。 |
|
|
starStyle |
{ backgroundUri: string, foregroundUri: string, secondaryUri?: string } |
- |
backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。 foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 |
事件
|
名称 |
功能描述 |
|
onChange(callback:(value: number) => void) |
操作评分条的评星发生改变时触发该回调。 |
示例代码
@Entry
@Component
struct Index {
@State rating: number = 1
@State indicator: boolean = false
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('current score is ' + this.rating).fontSize(20)
Rating({ rating: this.rating, indicator: this.indicator })
.stars(5)
.stepSize(0.5)
.onChange((value: number) => {
this.rating = value
})
}.width(350).height(200).padding(35)
}
}
示例效果：
- 点赞
- 收藏
- 关注作者
评论（0）