「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现

本篇将带领你实现一个实用的计时器应用,用户可以启动、暂停或重置计时器。该项目将涉及时间控制、状态管理以及按钮交互,是掌握鸿蒙应用开发的重要步骤。

在这里插入图片描述


关键词
  • UI互动应用
  • 时间控制
  • 状态管理
  • 用户交互

一、功能说明

在这个计时器应用中,用户可以通过按钮来启动、暂停和重置计时器。计时器会实时更新并显示时间,使用户能够体验到动态 UI 更新的效果。


二、所需组件
  • @Entry@Component 装饰器
  • Text 组件用于显示计时
  • Button 组件用于用户交互
  • setInterval 方法实现时间控制
项目结构
  • 项目名称TimerApp
  • 自定义组件名称TimerPage
  • 代码文件TimerPage.etsIndex.ets

三、代码实现
// TimerPage.ets
@Component
export struct TimerPage {@State timerValue: number = 0; // 控制计时器的值@State isRunning: boolean = false; // 控制计时器状态private intervalId: number | null = null; // 定时器 IDbuild() {Column({ space: 20 }) {// 显示当前计时器值Text(`${Math.floor(this.timerValue / 60).toString().padStart(2, '0')}:${(this.timerValue % 60).toString().padStart(2, '0')}`).fontSize(48).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 按钮交互行Row({ space: 20 }) {Button(this.isRunning ? '暂停' : '开始').onClick(() => {if (this.isRunning) {this.stopTimer(); // 暂停计时器} else {this.startTimer(); // 启动计时器}});Button('重置').onClick(() => {this.resetTimer(); // 重置计时器});}.justifyContent(FlexAlign.Center);}.padding(20).height('100%').width('100%').alignItems(HorizontalAlign.Center);}private startTimer() {this.isRunning = true;if (this.intervalId === null) {this.intervalId = setInterval(() => {this.timerValue += 1;}, 1000);}}private stopTimer() {this.isRunning = false;if (this.intervalId !== null) {clearInterval(this.intervalId);this.intervalId = null;}}private resetTimer() {this.stopTimer();this.timerValue = 0;}
}
// Index.ets
import { TimerPage } from './TimerPage'@Entry
@Component
struct Index {build() {Column() {TimerPage() // 调用自定义组件}.padding(20) // 设置页面内边距}
}

效果示例:用户点击“开始”按钮时,计时器开始计时;点击“暂停”按钮,计时器暂停;点击“重置”按钮,计时器重置为 0。
在这里插入图片描述


四、代码解读
  • setInterval()
    用于每秒更新一次 timerValue,实现计时功能。

  • clearInterval()
    用于停止计时器,避免计时继续。

  • @State 修饰符
    管理组件状态,确保计时器值和按钮显示的动态更新。


五、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

小结

本篇教程通过实现一个计时器应用,展示了如何在鸿蒙中使用状态管理和时间控制来实现动态交互。学会这些后,你可以将时间管理功能运用到更多复杂的应用中。


下一篇预告

在下一篇「UI互动应用篇3」中,我们将进一步探讨如何在应用中集成倒计时和定时提醒功能,学习更多时间相关的高级应用。


上一篇:「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
下一篇:「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

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

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

相关文章

群控系统服务端开发模式-应用开发-上传工厂开发

现在的文件、图片等上传基本都在使用oss存储。而现在常用的oss存储有阿里云、腾讯云、七牛云、华为云等,但是用的最多的还是前三种。而我主要封装的是本地存储、阿里云存储、腾讯云存储、七牛云存储。废话不多说,直接上传设计图及说明,就一目…

Hadoop生态圈框架部署(五)- Zookeeper完全分布式部署

文章目录 前言一、Zookeeper完全分布式部署(手动部署)1. 下载Zookeeper2. 上传安装包2. 解压zookeeper安装包3. 配置zookeeper配置文件3.1 创建 zoo.cfg 配置文件3.2 修改 zoo.cfg 配置文件3.3 创建数据持久化目录并创建myid文件 4. 虚拟机hadoop2安装并…

UI设计师们,AI留给你们的窗口期没多少了得亏生成的模型不能编辑

对于 UI 设计师们来说,AI 的发展确实带来了一定的挑战。 虽然目前生成的模型不能编辑,但谁也无法确定未来的发展走向。 然而,设计师们也不必过分担忧。人类的创造力、审美能力和对用户需求的深刻理解是无法被轻易取代的。 设计师可以利用这…

Gerrit 2.12.2 window版本部署

背景:原有gerritgit服务器一套(以下称老gerrit),现在需要在备份机器上面也搭建一套gerrit(以下称新gerrit)。 目前老gerrit服务器信息为:centos gerrit 2.12.2jdk1.8mysql5.1.73nginx 新gerrit服务器信息为&#xf…

一文搞懂Linux kernel编译步骤

一、前言 什么是Linux的内核编译呢?简单来说,Linux内核编译是一个将内核源代码转换成可在特定的硬件架构上运行的二进制文件的过程。通过编译内核,我们可以根据自己的需求和兴趣对内核进行定制和优化,以满足特定的应用场景。下文…

CST汽车天线仿真(双向混合求解)

CST从2018版本开始具有双向混合求解,到2019版已经通用微波工作室的各个求解器之间的双向混合。具体的混合对象如下图: 对天线的安装和耦合仿真,意味着对复杂结构(天线)和电大尺寸环境(安装平台,…

leetcode-5-最长回文子串

题解: 回文串:如果一个字符串正着读和反着读都是一样的那这个字符串就是回文串。 对于一个子串而言,如果它是回文串,并且长度大于 2,那么将它首尾的两个字母去除之后,它仍然是个回文串。 1、初始化字典d…

Python反射API:面向对象编程的“魔法镜”

在Python的世界里,面向对象编程(OOP)就像是一场盛大的化妆舞会,每个对象都穿着华丽的外衣,隐藏着自己的真实面目。而Python的反射API,就像是一面“魔法镜”,能够让我们窥探这些对象的真实身份和…

Python练习8

Python日常练习 题目: 编写函数,接收两个正整数作为参数,返回一个元组, 其中第一个元数为最大公约数,第二个元素为最小公倍数。 例如: 若输入12,8,则输出如下 【请输入一个…

推荐程序员好用的浏览器插件

推荐程序员好用的浏览器插件 1. 网页颜色控制:Dark Reader安装效果 2. 前端助手:FeHelper安装效果 3. markdown可视化:Markdown Reader安装效果 4. ES插件:Multi Elasticsearch Heads安装效果 1. 网页颜色控制:Dark Re…

希尔排序算法

1、基本思想 希尔排序也称缩小增量排序,是插入排序的一种更高效的改进版本。它的基本思想是先将待排序的数组元素按照一定的间隔(称为增量)分成若干个子序列,分别对这些子序列进行插入排序,随着迭代的进行,…

太速科技-634-基于3U PXIe的VU3P FMC+数据接口板

基于3U PXIe的VU3P FMC数据接口板 一、产品概述 板卡是一款基于 3U PXIE 总线架构的高性能数据预处理FMC 载板,具有 1 个 FMC(HPC)接口,1 个 X8 GTH 背板互联接口,可以实现 1 路 PCIe x8。板卡主控芯片采用Xilin…

OpenCV基本操作(python开发)——(8)实现芯片瑕疵检测

OpenCV基本操作(python开发)——(1) 读取图像、保存图像 OpenCV基本操作(python开发)——(2)图像色彩操作 OpenCV基本操作(python开发)——(3&…

MySQL数据库中的视图

视图 ​ 本篇将开始介绍有关数据库中视图的相关知识点,其中主要包含视图的基本使用,视图规则和限制。 ​ 视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图包含一系列带有名称的列和行数据,视图的数据变化会…

Docker 镜像拉不动?自建 Docker Hub 加速站 解决镜像拉取失败

本文首发于只抄博客,欢迎点击原文链接了解更多内容。 前言 众所周知,6 月份的时候,Docker Hub 的镜像就已经无法正常拉取,那会随手用 Nginx 反代了一下 Docker Hub,建了个自用的镜像站,一直用到了 9 月份&…

应对传统能源企业管理人员青黄不接问题:搭建系统完善的招聘管理体系

应对传统能源企业管理人员青黄不接问题:搭建系统完善的招聘管理体系 对于很多传统能源企业由于成立时间久,发展到现在,往往都面临着一个共性问题,即未来三到五年,老员工退休后,新员工如何接续的问题。这个…

C++进阶-->红黑树的实现

1、红黑树的概念 红黑树是一棵二叉搜索树,他和前面AVL树不同的是红黑树不是通过平衡因子来保证树的平衡,而是在树结点的处加多了个记录颜色的变量,这个变量可以是红色或者黑色。通过对任何一条从根到叶子的路径上各个结点的颜色进行约束&…

Linux操作系统开机引导

linux操作系统的开机引导的过程 linux操作系统开机流程图 1、开机自检:根据bios的设置,对cpu、内存、显卡、键盘等设备进行初步检测,如果以上检测设备正常工作,系统会把控制权移交到硬盘 总结:检测包含系统启动操作系…

DataX 的安装配置和使用 (详细版)

1,上传解压 1,开始上传安装包到你虚拟机上放置安装包的文件夹 2,开始解压 ,配置环境变量 1、上传 /opt/modules 2、解压 tar -zxvf datax.tar.gz -C /opt/installs 3、修改 vi /etc/profile 配置环境变量: export DAT…

蓝桥杯第21场小白入门赛补题

5.蓝桥派对 思路 :一个区间与多少个其他区间有关联,先对所有区间左端点和右端点从小到大排序,对于每个询问,我们先算出[1,r]这个区间里有多少个区间的起点即区间总数,使用upper_bound函数,然后使用lower_bo…