「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器

本篇将带你实现一个简易计步器应用,用户通过点击按钮增加步数并实时查看步数进度,目标步数为 10000 步。该项目示例展示了如何使用 Progress 组件和 Button 组件,并结合状态管理,实现交互式应用。

在这里插入图片描述


关键词
  • UI互动应用
  • 计步器
  • Button 组件
  • Progress 组件
  • 状态管理

一、功能说明

该简易计步器应用允许用户记录每日步数并显示步数进度条。通过点击“增加步数”按钮,步数会逐步增加,进度条显示步数目标的完成情况。用户还可以点击“重置”按钮将步数清零,重新开始计步。


二、所需组件
  • @Entry@Component 装饰器
  • Column 布局组件
  • Text 组件用于显示步数
  • Button 组件用于用户交互
  • Progress 组件用于显示进度
  • @State 修饰符用于状态管理
项目结构
  • 项目名称StepCounterApp
  • 自定义组件名称StepCounterPage
  • 代码文件StepCounterPage.etsIndex.ets

三、代码实现
// 文件名:StepCounterPage.ets// 定义计步器页面组件
@Component
export struct StepCounterPage {@State stepCount: number = 0; // 初始步数maxSteps: number = 10000; // 设定步数目标// 构建页面布局和组件build() {Column({ space: 20 }) { // 创建垂直布局容器,子组件间距为 20// 应用标题Text('简易计步器').fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 显示当前步数Text(`当前步数: ${this.stepCount}`).fontSize(20).alignSelf(ItemAlign.Center);// 显示目标步数Text(`目标步数: ${this.maxSteps}`).fontSize(18).fontColor(Color.Gray).alignSelf(ItemAlign.Center);// 线性进度条,显示当前步数的进度Progress({value: this.getProgress(), // 进度百分比total: 100, // 进度条总长度设定为 100%type: ProgressType.Linear, // 线性进度条}).color(Color.Green) // 设置进度颜色.backgroundColor(Color.Gray) // 设置背景色.height(8) // 设置进度条高度.width('80%').alignSelf(ItemAlign.Center);// “增加步数”按钮,模拟计步功能Button('增加步数').onClick(() => {this.increaseStepCount(); // 点击增加步数}).fontSize(20).backgroundColor(Color.Blue).fontColor(Color.White).margin({ top: 20 });// “重置”按钮,清零步数Button('重置').onClick(() => {this.resetStepCount(); // 点击重置步数}).fontSize(20).backgroundColor(Color.Red).fontColor(Color.White).margin({ top: 10 });}.padding(20).width('100%').height('100%').alignItems(HorizontalAlign.Center);}// 获取进度百分比private getProgress(): number {return Math.min((this.stepCount / this.maxSteps) * 100, 100); // 限制进度不超过 100%}// 增加步数的逻辑private increaseStepCount() {if (this.stepCount < this.maxSteps) { // 防止步数超过目标this.stepCount += 500; // 模拟步数增加,每次增加 500 步}}// 重置步数的逻辑private resetStepCount() {this.stepCount = 0; // 重置步数为 0}
}
// 文件名:Index.ets// 导入计步器页面组件
import { StepCounterPage } from './StepCounterPage'// 定义应用入口组件
@Entry
@Component
struct Index {build() {Column() {StepCounterPage() // 引用计步器页面组件}.padding(20) // 设置页面内边距}
}

效果示例:用户点击“增加步数”按钮后,步数会实时更新并显示进度条的变化,用户也可以点击“重置”按钮将步数清零。

在这里插入图片描述


四、代码解读
  • @State stepCount
    使用状态变量保存当前步数,通过 @State 修饰符管理变化。
  • Progress 组件
    线性进度条组件用于显示当前步数在目标步数中的完成比例,设置 total 为 100 以代表百分比。
  • increaseStepCount() 方法
    通过点击按钮增加步数,每次增加一定数量,模拟步数的增长。
  • resetStepCount() 方法
    stepCount 重置为 0,清除进度。

五、优化建议
  1. 动态目标设置:允许用户设置自己的步数目标,让应用更具个性化。
  2. 动画效果:在进度条更新时增加动画,使用户体验更流畅。
  3. 自动保存步数:在应用重启后保持步数不变,提供连续性记录功能。
  4. 成就系统:实现步数达标后的成就提示,增加用户的成就感。

六、相关知识点
  • 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解

小结

本篇教程通过简易计步器应用,演示了如何使用 Progress 组件和 Button 组件,实时更新状态并显示进度。通过该项目,你学会了如何在应用中进行状态管理和数据的实时展示。


下一篇预告

下一篇「UI互动应用篇8 - 自定义评分星级组件」将介绍如何实现一个评分系统,帮助用户通过点击星星来进行评分。


上一篇:「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
下一篇:「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目功能--套餐预约占比饼形图

一、需求分析 会员可以通过移动端自助进行体检预约&#xff0c;在预约时需要选择预约的体检套餐。我们要通过饼形图直观的展示出会员预约的各个套餐占比情况。 二、代码实现 实现步骤&#xff1a; 步骤一&#xff1a;将echarts.js文件复制到工程的plugins目录下 步骤二&…

多媒体信息检索

文章目录 一、绪论二、文本检索 (Text Retrieval)(一) 索引1.倒排索引2.TF-IDF (二) 信息检索模型 (IR模型&#xff0c;Information Retrieval)1.布尔模型 (Boolean模型)(1)扩展的布尔模型 (两个词)(2)P-Norm模型 (多个词) 2.向量空间模型 (Vector Space Model&#xff0c;VSM)…

gan的所有种类,人工智能 机器学习,gan的所有算法

参考最全汇总GAN网络及其各种变体&#xff08;附论文及代码实现&#xff09;_gan网络代码-CSDN博客 这是我找到的关于您提问的答案: 1. **GAN类型**: Auxiliary Classifier GAN **参考论文**: 《Conditional Image Synthesis With Auxiliary Classifier GANs》 **代码地址**: …

【漏洞复现】万户OA-ezOFFICE getAutoCode.jsp Sql注入漏洞

免责声明: 本文旨在提供有关特定漏洞的信息,以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步,并非出于恶意。读者应理解,利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…

在vscode中如何利用git 查看某一个文件的提交记录

在 Visual Studio Code (VSCode) 中&#xff0c;你可以使用内置的 Git 集成来查看某个文件的提交历史。以下是具体步骤&#xff1a; 使用 VSCode 内置 Git 功能 打开项目&#xff1a; 打开你的项目文件夹&#xff0c;确保该项目已经是一个 Git 仓库&#xff08;即项目根目录下…

vue2 -- el-form组件动态增减表单项及表单项验证

需求 在数据录入场景(如订单信息录入)中,可根据实际情况(如商品种类增加)动态添加表单项(如商品相关信息)。包含必填项验证和数据格式验证(如邮箱、电话格式),防止错误数据提交。 效果 代码一 <template><div>

【uiautomator】自动化测试camera【一】

文章目录 1 概述2 准备工作3 写个demo 1 概述 本文档是自己写andorid camera自动化测试的随笔 测试机器为 OPPO Find x7 测试Apk为oppo的系统相机. 2 准备工作 我电脑是有装conda环境的,所以我直接用conda创建虚拟环境专门用于相关的测试. https://mirrors.tuna.tsinghua.ed…

使用 Elasticsearch 构建食谱搜索(一)

作者&#xff1a;来自 Elastic Andre Luiz 了解如何使用 Elasticsearch 构建基于语义搜索的食谱搜索。 简介 许多电子商务网站都希望增强其食谱搜索体验。正确使用语义搜索可以让客户根据更自然的查询&#xff08;例如 “something for Valentines Day - 情人节的礼物” 或 “…

SystemVerilog学习笔记(七):函数与任务

函数 函数的主要用途是编写一段可以随时调用n次的代码&#xff0c;只需调用函数名即可&#xff0c;不需要任何模拟时间来执行。函数是返回类型&#xff0c;仅返回函数声明中提到的单个值&#xff0c;如果未声明则返回一个位的值。 语法&#xff1a; initial begin functio…

物理验证Calibre LVS | SMIC Process过LVS时VNW和VPW要如何做处理?

SMIC家工艺的数字后端实现PR chipfinish写出来的带PG netlist如下图所示。我们可以看到标准单元没有VNW和VPW pin的逻辑连接关系。 前几天小编在社区星球上分享了T12nm ananke_core CPU低功耗设计项目的Calibre LVS案例&#xff0c;就是关于标准单元VPP和VBB的连接问题。 目前…

【编程概念基础知识】

、编程基础 一、面向对象的三大特性 1、封装&#xff1a; 盒子、零件、按钮 隐藏对象 的内部状态&#xff0c;并且只通过对象的方法来访问数据 想象你有一个小盒子&#xff08;这个盒子就是一个类&#xff09;&#xff0c;里面装着一些零件&#xff08;这些零件就是数据&a…

Oracle 第23章:大数据与NoSQL集成

第23章 大数据与NoSQL集成 在当今的数字化时代&#xff0c;数据量的爆炸性增长给传统的关系型数据库带来了前所未有的挑战。为了应对这些挑战&#xff0c;NoSQL&#xff08;Not Only SQL&#xff09;数据库应运而生&#xff0c;它提供了灵活的数据模型和可扩展的架构来处理大规…

纯前端实现在线预览excel文件(插件: LuckyExcel、Luckysheet)

概述 在实际开发中&#xff0c;遇到需要在线预览各种文件的需求&#xff0c;最近遇到在线预览excel文件的需求&#xff0c;在此记录一下&#xff01;本文主要功能实现&#xff0c;用于插件 LuckyExcel &#xff0c;Luckysheet&#xff01;废话不多说&#xff0c;上代码&#xf…

实验05多重循环---7-09 打印金字塔图案

打印一个由 m 行字符 * 组成的金字塔形图案。 输入格式: 输入一个整数&#xff0c;表示行数 m&#xff0c;其中 m 满足 2≤m≤10。 输出格式: 由字符 * 组成的 m 行金字塔形图案。 输入样例: 5 输出样例: **************** *********//自己写的 #define _CRT_SECURE_NO_WAR…

LocalDate和LocalDateTime类

在Java 8中引入的LocalDate表示一个格式为yyyy-MM-dd的日期&#xff0c;如2024-06-13。它不存储时间或时区。我们可以从LocalDate中获取许多其他的日期字段&#xff0c;如年日(day-of-year)、周日(day-of-week)、月日(month-of-year)等等。 1 初始化 LocalDate以年月日的格式输…

信息安全工程师(82)操作系统安全概述

一、操作系统安全的概念 操作系统安全是指操作系统在基本功能的基础上增加了安全机制与措施&#xff0c;从而满足安全策略要求&#xff0c;具有相应的安全功能&#xff0c;并符合特定的安全标准。在一定约束条件下&#xff0c;操作系统安全能够抵御常见的网络安全威胁&#xff…

gitlab ci/cd搭建及使用笔记

记录下使用gitlab的ci/cd的devops构建过程中&#xff0c;一些易忘点或者踩坑点&#xff1a; 官方文档中英文&#xff08;建议英文&#xff09; https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…

SQL注入(SQL Injection)详解

SQL注入&#xff08;SQL Injection&#xff09;是一种代码注入技术&#xff0c;它通过在应用程序的输入字段中插入或“注入”恶意的SQL语句&#xff0c;从而操控后端数据库服务器执行非预期的命令。这种攻击方式常用于绕过应用程序的安全措施&#xff0c;未经授权地访问、修改或…

小程序源码-模版 100多套小程序(附源码)

一、搭建开发环境 搭建环境可以从这里开始&#xff1a; 微信小程序从零开始开发步骤&#xff08;一&#xff09;搭建开发环境 - 简书 二、程序示例 1、AppleMusic https://download.csdn.net/download/m0_54925305/89977187 2、仿B站首页 https://download.csdn.net/downlo…

安装baidubce库

直接pip install baidubce会带来一系列后续文件缺失问题&#xff0c;应该&#xff1a; pip install bce-python-sdk