# 4.11:评分条组件

项目开发中可能会有设置评分的需求,比如给用户一个弹窗,让用户给当前 APP 设置评分等场景,ArkUI开发框架提供了评分条组件 Rating ,本节笔者介绍一下它的简单使用。

# 4.11.1:Rating定义介绍

interface RatingInterface {
  (options?: { rating: number; indicator?: boolean }): RatingAttribute;
}
1
2
3
  • optionsRating 的配置参数,rating 表示设置当前评分值, indicator 表示是否可以操作,设置为 true 表示评分条是一个指示条,不可操作,false 表示可以操作的评分条。

简单样例如下所示:

@Entry @Component struct RatingTest {
  build() {
    Column({ space: 10 }) {
      Rating({ rating: 0, indicator: true })  // 设置不可操作,默认值为0
        .width(220)
        .height(60)

      Rating({ rating: 0, indicator: false }) // 设置可操作,默认值为0
        .width(220)
        .height(60)
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

样例运行效果如下图所示:

4_11_1_1

📢:由运行效果可知,当设置 indicatortrue 时, Rating 不可操作。

# 4.11.2:Rating属性介绍

declare class RatingAttribute extends CommonMethod<RatingAttribute> {
  stars(value: number): RatingAttribute;
  stepSize(value: number): RatingAttribute;
  starStyle(value: { backgroundUri: string; foregroundUri: string; secondaryUri?: string }): RatingAttribute;
}
1
2
3
4
5
  • stars:设置星星的总数,默认值为 5
  • stepSize:设置操作评级的步长,默认值为 0.5
  • starStyle:设置星星的样式,各参数说明如下:
    • backgroundUri:设置未选中的星星的图片,仅支持本地图片。
    • foregroundUri:设置选中的星星的图片,仅支持本地图片。
    • secondaryUri:部分选中的星级的图片路径,仅支持本地图片。

简单样例如下所示:

@Entry @Component struct RatingTest {

  build() {
    Column({ space: 10 }) {
      Rating({ 
        rating: 3,       // 设置默认值为3
        indicator: false // 设置可以操作
      })
        .width(220)
        .height(40)
        .stars(8)        // 设置总共有8颗星星
        .stepSize(0.5)   // 设置步长为0.5
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

样例运行效果如下图所示:

4_11_2_1

# 4.11.3:Rating事件介绍

declare class RatingAttribute extends CommonMethod<RatingAttribute> {
  onChange(callback: (value: number) => void): RatingAttribute;
}
1
2
3
  • onChange:评分条评分发生改变时触发该回调。

简单样例如下所示:

@Entry @Component struct RatingTest {

  @State rating: number = 1

  build() {
    Column({ space: 10 }) {
      Rating({
        rating: this.rating,
        indicator: false
      })
        .width(220)
        .height(40)
        .stars(8)
        .stepSize(0.5)
        .onChange((value) => {
          this.rating = value;
        })

      Text(`总分数:${this.rating}`)
        .fontSize(22)
        .width(220)

    }
    .width('100%')
    .height("100%")
    .padding(10)
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

样例运行效果如下图所示:

4_11_1_1

📢:在预览器上测试,拖动评分条时有闪烁现象,笔者已经把该现象已经反馈给 OpenHarmony 了。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2