当前位置：首页 > article >正文

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

article 2024/12/22 8:52:11

本篇将带你实现一个评分统计工具，用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果，并统计平均分。这一功能适合用于问卷调查或评分统计的场景。
在这里插入图片描述

关键词

UI互动应用
评分统计
状态管理
数据处理
多目标评分

一、功能说明

评分统计工具允许用户对多个选项（如电影、餐厅或商品）分别评分，应用实时显示每个选项的评分，并计算和显示所有选项的平均评分。

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件
Text 组件用于显示评分结果
Button 组件用于评分选择
@State 修饰符用于状态管理
Image 组件用于展示示例图片

三、项目结构

项目名称：RatingStatisticsApp
自定义组件名称：RatingStatisticsPage
代码文件：RatingStatisticsPage.ets、Index.ets

四、代码实现

// 文件名：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;
  }
}

// 文件名：Index.ets

import { RatingStatisticsPage } from './RatingStatisticsPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      RatingStatisticsPage() // 调用评分统计工具页面
    }
    .padding(20)
  }
}

效果示例：用户可以为每个选项打分，评分实时更新，并计算和显示平均评分。评分按钮选中后及以下的按钮会变为粉色，其余保持默认灰色。界面上还展示了示例图片。

五、代码解读

状态管理
- 通过 @State 修饰符管理 ratings 数组，实现评分的实时更新。
评分按钮颜色动态变化
- 使用 getButtonColor 方法判断当前评分按钮的背景颜色。
- 被选中及以下的按钮会变为粉色，未选中的保持默认灰色。
动态布局
- 使用 ForEach 遍历 options 和评分值，动态生成评分按钮及显示当前评分的文本。
平均评分计算
- 通过 reduce 方法对所有选项的评分求和，计算出平均值。
示例图片
- 使用 Image($r('app.media.cat')) 添加示例图片，增强界面视觉效果。