「Mac畅玩鸿蒙与硬件45」UI互动应用篇22

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

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

关键词

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.etsimport { RatingStatisticsPage } from './RatingStatisticsPage';@Entry
@Component
struct Index {build() {Column() {RatingStatisticsPage() // 调用评分统计工具页面}.padding(20)}
}

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

五、代码解读

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