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

红目香薰

发布于 2024-02-03 08:49:36

730

发布于 2024-02-03 08:49:36

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

示例代码

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)
   }
 }

示例效果：