「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具 原创

// 文件名：RatingStatisticsPage.ets

@Component
export struct RatingStatisticsPage {
  @State ratings: number[] = [0, 0, 0]; // 每个选项的评分
  options: string[] = ['选项 1', '选项 2', '选项 3']; // 选项列表

  build() {
    Column({ space: 20 }) {
      // 示例图片
      Image($r('app.media.cat'))
        .width(226)
        .height(266)
        .alignSelf(ItemAlign.Center);

      // 显示评分选项及评分按钮
      ForEach(this.options, (option: string, index: number) => {
        Column({ space: 10 }) {
          Text(`${option} 当前评分: ${this.ratings[index]} / 5`)
            .fontSize(20)
            .alignSelf(ItemAlign.Start);

          Row({ space: 5 }) {
            ForEach([1, 2, 3, 4, 5], (score: number) => {
              Button(`${score}`)
                .fontSize(18)
                .backgroundColor(this.getButtonColor(index, score)) // 动态设置按钮背景颜色
                .fontColor(Color.White)
                .onClick(() => {
                  this.setRating(index, score);
                });
            });
          }
        };
      });

      // 显示平均评分
      Text(`平均评分: ${this.calculateAverage().toFixed(1)} / 5`)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }

  // 设置评分
  private setRating(index: number, rating: number) {
    this.ratings[index] = rating;
  }

  // 动态获取按钮颜色
  private getButtonColor(index: number, score: number): Color {
    return this.ratings[index] >= score ? Color.Pink : Color.Gray; // 选中评分及其以下的按钮变色
  }

  // 计算平均评分
  private calculateAverage(): number {
    const total = this.ratings.reduce((sum, rating) => sum + rating, 0);
    return total / this.ratings.length;
  }
}
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.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

// 文件名：Index.ets

import { RatingStatisticsPage } from './RatingStatisticsPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      RatingStatisticsPage() // 调用评分统计工具页面
    }
    .padding(20)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.