- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

HarmonyOS-UIAbitity-Rating——【坚果派-红目香薰】

红目香薰发表于 2024/03/31 18:20:22 2024/03/31

【摘要】摘要作者：红目香薰团队：坚果派团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。目录摘要HarmonyOS-UIAbitity-Rating接口属性事件示例代码HarmonyOS-UIAbitity-Rating提供在给定范围内选择评分的组件。接口Rating(options?: { rating: number, indicator?: b...

摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有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)
}
}