「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件

本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。

在这里插入图片描述


关键词
  • UI互动应用
  • 评分系统
  • 自定义星级组件
  • 状态管理
  • 用户交互

一、功能说明

该自定义评分星级组件允许用户点击星星进行评分,评分范围从 1 到 5 星。点击星星时,页面会更新显示当前评分。同时,界面上添加了一只可爱的猫咪图片来增添趣味性。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Image 组件用于显示猫咪图片
  • Text 组件用于显示评分结果
  • Button 组件用于用户交互
  • @State 修饰符用于状态管理
项目结构
  • 项目名称StarRatingApp
  • 自定义组件名称StarRatingPage
  • 代码文件StarRatingPage.etsIndex.ets

三、代码实现
// 文件名:StarRatingPage.ets

// 定义评分页面组件
@Component
export struct StarRatingPage {
  @State currentRating: number = 0; // 当前评分
  maxRating: number[] = [1, 2, 3, 4, 5]; // 评分的最大星级数

  // 构建页面布局和组件
  build() {
    Column({ space: 20 }) { // 创建垂直布局容器,子组件间距为 20
      // 显示猫咪图片
      Image($r('app.media.cat'))
        .width('30%')
        .height('67%')
        .margin({ bottom: 20 })
        .alignSelf(ItemAlign.Center);

      // 显示评分标题
      Text('请给猫咪评分:')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 评分星星组件
      Row({ space: 10 }) {
        ForEach(this.maxRating, (star: number) => {
          Button(this.currentRating >= star ? '★' : '☆') // 根据评分状态显示实心或空心星星
            .fontSize(30)
            .onClick(() => {
              this.setRating(star); // 点击星星时更新评分
            })
            .backgroundColor(Color.Transparent) // 背景透明
            .fontColor(this.currentRating >= star ? Color.Yellow : Color.Gray); // 设置选中与未选中颜色
        });
      }
      .justifyContent(FlexAlign.Center);

      // 显示当前评分结果
      Text(`评分: ${this.currentRating} / ${this.maxRating.length}`)
        .fontSize(20)
        .margin({ top: 20 })
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 更新评分的方法
  private setRating(rating: number) {
    this.currentRating = rating; // 设置当前评分
  }
}
// 文件名:Index.ets

// 导入评分页面组件
import { StarRatingPage } from './StarRatingPage'

// 定义应用入口组件
@Entry
@Component
struct Index {
  build() {
    Column() {
      StarRatingPage() // 引用评分页面组件
    }
    .padding(20) // 设置页面内边距
  }
}

效果示例:用户点击星星即可评分,选中的星星会变为黄色,未选中的星星保持灰色。屏幕上会显示猫咪图片,评分体验更具趣味性。

在这里插入图片描述


四、代码解读
  • @State currentRating
    保存当前的评分值,点击星星时更新评分并触发 UI 重绘。
  • Button 组件
    用于实现星星图标的点击操作,点击时根据评分状态显示实心或空心星星。
  • setRating() 方法
    通过点击星星更新当前评分并实时反馈。

五、优化建议
  1. 添加评分重置功能:可在界面中加入“重置评分”按钮,让用户能重新选择评分。
  2. 增加动画效果:为星星点击添加轻微的缩放或颜色过渡效果,提升用户体验。
  3. 动态猫咪图片:根据评分展示不同状态的猫咪图片,例如高评分显示开心的猫咪,低评分显示伤心的猫咪。

六、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

小结

本篇教程通过自定义评分星级组件的实现,演示了如何利用 ButtonText 组件实现评分功能,并通过状态管理动态显示评分结果。添加猫咪图片增强了界面的趣味性,为用户带来更好的交互体验。


下一篇预告

下一篇「UI互动应用篇9 - 番茄钟倒计时应用」将展示如何实现一个番茄钟倒计时应用,用户可以设置专注时间和休息时间的时长。


上一篇: 「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器
下一篇:「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912774.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pdf转excel;pdf中表格提取

一、问题描述 在工作中或多或少会遇到:需要将某份pdf中的表格数据提取出来,以便能够“修改使用”数据 可将pdf中的表格提取出来,解决办法还有点复杂 尤其涉及“pdf中表格不是标准的单元格”的时候,提取数据到excel不太容易 比…

IT架构管理

目录 总则 IT架构管理目的 明确组织与职责 IT架构管理旨在桥接技术实施与业务需求之间的鸿沟,通过深入理解业务战略和技术能力,推动技术创新以支持业务增长,实现技术投资的最大价值。 设定目标与范围 IT架构管理的首要目的是确立清晰的组织…

小红书图文矩阵的运营策略与引流技巧解析

内容概要 小红书图文矩阵是一种高效的内容运营方式,能够帮助品牌在竞争激烈的环境中脱颖而出。通过构建矩阵账号,品牌可以实现多维度的内容覆盖,创造出丰富而立体的用户体验。为什么要做图文矩阵?首先,这种方式能够提…

python中常见的8种数据结构之一元组

元组(tuple)是Python中常见的数据结构之一,它是一个有序、不可变的序列。元组使用圆括号来表示,可以包含任意类型的元素,包括数字、字符串、列表等。元组的元素可以通过索引访问,但是不能修改。 下面是一些…

计算机毕业设计Python+大模型动漫推荐系统 动漫视频推荐系统 机器学习 协同过滤推荐算法 bilibili动漫爬虫 数据可视化 数据分析 大数据毕业设计

作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验,被多个学校常年聘为校外企业导师,指导学生毕业设计并参与学生毕业答辩指导,…

【leetcode练习·二叉树】用「分解问题」思维解题 I

本文参考labuladong算法笔记[【强化练习】用「分解问题」思维解题 I | labuladong 的算法笔记] 105. 从前序与中序遍历序列构造二叉树 | 力扣 | LeetCode | 给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵…

产品经理晋级-Axure中继器制作美观表格

这里的效果,步骤如下: 点击中继器,输入表格信息;在中继器中创建表格内容,把你想要的效果制作在中继器中,表头有几个表格,这边就对应多少个。 按照视频的过程把中继器双击后-样式中的文本内容&am…

防火墙|WAF|漏洞|网络安全

防火墙|WAF|漏洞|网络安全 防火墙 根据内容分析数据包: 1、源IP和目的IP地址 2、有效负载中的内容。 3、数据包协议(例如,连接是否使用 TCP/IP 协议)。 4、应用协议(HTTP、Telnet、FTP、DNS、SSH 等)。 5…

【Linux系统编程】第四十四弹---从TID到线程封装:全面掌握线程管理的核心技巧

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、tid是什么 1.1、理解库 1.2、理解tid 1.3、tid中线程局部存储 2、封装线程 2.1、基本结构 2.2、函数实现 2.3、使用…

医学图像算法之基于Unet的视网膜血管分割

第一步:准备数据 视网膜血管分割数据比较少,但效果好,总共40张 第二步:搭建模型 UNet主要贡献是在U型结构上,该结构可以使它使用更少的训练图片的同时,且分割的准确度也不会差,UNet的网络结构…

ARM死机(HardFault)调试技巧详解(栈回溯,不破坏现场)

目录 Keil调试技巧: 一.不破坏现场连接仿真器与进入debug 二.栈回溯 死机调试示例 J-Link调试方法 示例:空指针异常 不能连接烧录器或者读取内存怎么办? 在日常开发中,经常会遇到单片机卡死机等问题,经常很难定…

nodejs 020: React语法规则 props和state

props和state 在 React 中,props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。 一、props 和 state的区别 特性propsstate定义方式由父组件传递给子组件的数据组件内部管理的本地数据是否可修改不可变&#xff…

【开源免费】基于SpringBoot+Vue.JS水果购物网站(JAVA毕业设计)

博主说明:本文项目编号 T 065 ,文末自助获取源码 \color{red}{T065,文末自助获取源码} T065,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

python可视化进阶

引用: 首先需要安装 plotnine from plotnine import* import joypy数据可视化进阶操作 3.1 类别数据可视化 【例3-1】——绘制简单条形图 【代码框3-1】——绘制简单条形图 # 图3-1的绘制代码 import pandas as pd import matplotlib.pyplot as plt from cvxpy …

大模型入门自学资源汇总,很难找到比这还全的大模型学习资源总结了!

接触各种AI工具到现在也快两年了,今年和同学陆续做了一些AI应用的科普宣讲,在这过程中收集了不少自学资源,特地挑出一部分整理成以下的内容。 书籍 大模型应用开发极简入门:基于GPT-4和ChatGPT 首推今年年初出版的《大模型应用开…

为何选择Spring AI Alibaba开发智能客服平台?

0 前言 本文来看如何使用Spring AI Alibaba构建Agent应用。 1 需求 智能客服平台,可帮助用户完成机票预定、问题解答、机票改签、取消等动作,具体要求: 基于 AI 大模型与用户对话,理解用户自然语言表达的需求支持多轮连续对话…

Python学习从0到1 day27 第三阶段 Spark ② 数据计算Ⅰ

人总是会执着于失去的,而又不珍惜现在所拥有的 —— 24.11.9 一、map方法 PySpark的数据计算,都是基于RDD对象来进行的,采用依赖进行,RDD对象内置丰富的成员方法(算子) map算子 功能:map算子…

数据结构合并两个有序链表

数据结构 1.合并两个有序数组代码: 1.合并两个有序数组 这里我们可以创建一个新的对象作为合并后的新链表newHead,而NewHead.next就是我们要返回的头部的位置 在创建一个对象来获取nextHead.next下一个节点来作为我们新链表的起始位置防止我们的头部位置…

动态规划 —— dp 问题-买卖股票的最佳时机含手续费

1. 买卖股票的最佳时机含手续费 题目链接: 714. 买卖股票的最佳时机含手续费 - 力扣(LeetCode)https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-with-transaction-fee/description/ 2. 算法原理 状态表示:以某一个…

利用pythonstudio写的PDF、图片批量水印生成器,可同时为不同读者生成多组水印

现在很多场合需要将PDF或图片加水印,本程序利用pythonstudio编写。 第一步 界面 其中: LstMask:列表框 PopupMenu:PmnMark LstFiles:列表框 PopupMenu:PmnFiles OdFiles:文件选择器 Filter:PDF文件(.PDF)|.PDF|图像文件(.JPG)|.JPG|图像文件(.png…