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

简介: 本篇将带你实现一个评分统计工具,用户可以对多个选项进行评分。应用会实时更新每个选项的评分结果,并统计平均分。这一功能适合用于问卷调查或评分统计的场景。

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

20241217_234357.gif


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

一、功能说明

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


二、所需组件

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

三、项目结构

  • 项目名称RatingStatisticsApp
  • 自定义组件名称RatingStatisticsPage
  • 代码文件RatingStatisticsPage.etsIndex.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)
  }
}

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

20241217_234357.gif


五、代码解读

  1. 状态管理

    • 通过 @State 修饰符管理 ratings 数组,实现评分的实时更新。
  2. 评分按钮颜色动态变化

    • 使用 getButtonColor 方法判断当前评分按钮的背景颜色。
    • 被选中及以下的按钮会变为粉色,未选中的保持默认灰色
  3. 动态布局

    • 使用 ForEach 遍历 options 和评分值,动态生成评分按钮及显示当前评分的文本。
  4. 平均评分计算

    • 通过 reduce 方法对所有选项的评分求和,计算出平均值。
  5. 示例图片

    • 使用 Image($r('app.media.cat')) 添加示例图片,增强界面视觉效果。

六、优化建议

  1. 动态选项支持:允许用户自定义添加评分选项,使工具更具通用性。
  2. 评分结果导出:添加数据导出功能,方便用于问卷分析和统计。
  3. 误触提示:增加确认提示,避免用户误触按钮导致评分变化。

七、效果展示

  • 评分按钮交互:选中的评分按钮及其以下按钮背景颜色变为粉色,其余保持灰色
  • 平均评分展示:实时更新评分后,自动计算并显示平均评分。
  • 示例图片展示:页面展示了一张示例图片,提升界面视觉体验。

八、相关知识点


小结

本篇教程通过评分统计工具的实现,展示了状态管理、动态布局及数据计算的应用。用户可以体验实时评分更新及平均分计算,适用于问卷调查和评分统计场景。


下一篇预告

在下一篇「UI互动应用篇23 - 自定义天气预报组件」中,我们将探讨如何通过静态数据和动态交互实现一个简易天气预报组件,包括城市选择、天气图标展示和温度调节功能。


上一篇: 「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器

下一篇: 「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=446
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
6天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
135 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
21天前
|
人工智能 自然语言处理 API
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
461 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
69 13
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
68 10
|
缓存 Python
mac彻底卸载应用
删除应用 打开访达,找到PyCharm应用,移到废纸篓; 清除残留数据 清理缓存,参数,日志相关配置文件,示例文件名:PyCharm2019.2 打开终端依次执行下列命令 cd ~/Library/Preferences/ rm -rf PyCharm2019.
|
5月前
|
iOS开发 MacOS Windows
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
|
3月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
175 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
5月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
161 59
|
4月前
|
机器学习/深度学习 Python
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
本篇将详细介绍如何在Mac系统上安装和配置Anaconda,如何创建虚拟环境,并学习如何使用 `pip` 和 `conda` 管理Python包,直到成功运行第一个Python程序。通过本篇,您将学会如何高效地使用Anaconda创建和管理虚拟环境,并使用Python开发。
150 4
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
|
4月前
|
IDE 开发工具 iOS开发
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置
本篇将详细介绍如何在Mac系统上安装Python,并配置Python开发环境。内容涵盖Python的安装、pip包管理工具的配置与国内镜像源替换、安装与配置PyCharm开发工具,以及通过PyCharm编写并运行第一个Python程序。通过本篇的学习,用户将完成Python开发环境的搭建,为后续的Python编程工作打下基础。
414 2
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置