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

news2024/11/8 0:25:07

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

在这里插入图片描述


关键词
  • 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; // 定时器 ID

  build() {
    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.coloradmin.cn/o/2235392.html

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

相关文章

Java高效学习家教平台系统小程序源码

📚 家教平台系统:让孩子学习更高效的秘密武器 🚀 👩‍🏫 引言:家教新风尚,线上平台引领教育潮流 在这个信息爆炸的时代,家教平台系统如同雨后春笋般涌现,为孩子们的学习…

# Python基础到实战一飞冲天(一)--linux基础(二)

Python基础到实战一飞冲天(一)–linux基础(二) 一、Ubuntu系统目录结构演示和简介 1、linux 用户目录 位于 /home/user,称之为用户工作目录或家目录,表示方式: /home/user ~2、 Linux 主要目…

canfestival主站多电机对象字典配置

不要使用数组进行命名:无法运行PDO 使用各自命名的方式:

基于python多准则决策分析的汽车推荐算法设计与实现

摘要 随着汽车市场的快速发展和消费者需求的多样化,汽车选择变得愈加复杂。为了帮助消费者在众多汽车选项中做出明智的决策,基于多准则决策分析(MCDA)的汽车推荐算法应运而生。本研究旨在设计和实现一种基于 Python 的汽车推荐系…

【测试】【Debug】vscode中同一个测试用例出现重复

这种是正常的情况 当下面又出现一个 类似python_test->文件夹名->test_good ->test_pad 同一个测试用例出现两次,名称都相同,显然是重复了。那么如何解决? 这种情况是因为在终端利用“pip install pytest”安装 之后,又…

C++__XCode工程中Debug版本库向Release版本库的切换

Debug和Release版本分别设置编译后,就分别得到了对应的lib库,如下图: 再生成Release后如下图:

VisionPro —— CogIPOneImgeTool工具详解

CogIPOneImageTool工具主要用来对单张图像进行算法处理操作 CogIPOneImgeTool简介 CogIPOneImageTool 工具可完成高斯平滑、高通滤波和图像量化等基本图像处理操作。Image Processing One Image 工具编辑控件为此工具提供图形用户界面。 Image Processing Operations (图像处…

【Ai测评】GPT Search偷偷上线,向Google和微软发起挑战!

最近,OpenAI 又推出了一个令人兴奋的新功能——GPT Search,已经正式上线了! 功能介绍 GPT Search:为你带来全新搜索体验 目前,桌面端和移动端应用程序已经全面上线,所有 GPT Plus 和 Team 用户都可以立即…

基于SSM框架的乡村农户对口扶贫系统

基于SSM框架的乡村农户对口扶贫系统。 设计步骤: 项目架构创建:首先创建项目的基本架构,包括com.zc.xxx路径下的文件和resources资源文件夹。 SSM架构:使用Spring、SpringMVC、MyBatis作为后端架构,采用POJO—Dao—…

HANDLINK ISS-7000v2 网关 login_handler.cgi 未授权RCE漏洞复现

0x01 产品简介 瀚霖科技股份有限公司ISS-7000 v2网络网关服务器是台高性能的网关,提供各类酒店网络认证计费的完整解决方案。由于智慧手机与平板电脑日渐普及,人们工作之时开始使用随身携带的设备,因此无线网络也成为网络使用者基本服务的项目。ISS-7000 v2可登录300至1000…

【主板定制化服务】专业主板定制化服务,全流程覆盖,为客户打造独特硬件方案

在当今的科技环境中,标准化的硬件产品常常无法满足各种细分领域的特殊需求,尤其是工业控制、嵌入式系统、服务器等场景中,个性化设计的主板能够为用户带来更高的灵活性和性能优化。我们团队专注于主板研发,提供一系列标准产品&…

揭秘全向轮运动学:机动艺术与上下位机通信的智慧桥梁

✨✨ Rqtz 个人主页 : 点击✨✨ 🌈Qt系列专栏:点击 🎈Qt智能车上位机专栏: 点击🎈 本篇文章介绍的是有关于全向轮运动学分析,单片机与上位机通信C代码以及ROS里程计解算的内容。 目录 大纲 ROS(机器人操作系统&…

【TS】九天学会TS语法——3.TypeScript 函数

今天学习 TypeScript 的函数,包括函数类型、可选参数、默认参数、剩余参数。 函数声明和表达式函数类型可选参数和默认参数剩余参数 在 TypeScript 中,函数是编程的核心概念之一。它们允许我们将代码组织成可重用的块,并提供了强大的抽象能力…

stm32不小心把SWD和JTAG都给关了,程序下载不进去,怎么办?

因为想用STM32F103的PA15引脚,调试程序的时候不小心把SWD和JTAD接口都给关了,先看下罪魁祸首 GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE);//关掉JTAG,不关SWGPIO_PinRemapConfig(GPIO_Remap_SWJ_Disable, ENABLE);//关掉SW&am…

Rust重写万物之——从头开始编写浏览器引擎

一款用 Rust 编写的全新“轮子”最近备受关注—— 因不满大公司垄断,Gosub 项目团队用 Rust 从头开始编写了一个新的浏览器引擎,目前 star 数已超过 3k。 Gosub 项目的诞生是因为不少用户对当前的 Web 浏览器现状感到不满。 尽管市面上有许多浏览器可供选择,但其中大多数…

【设计模式系列】桥接模式(十三)

一、什么是桥接模式 桥接模式(Bridge Pattern)是一种结构型设计模式,其核心目的是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式主要用于处理那些在设计时无法确定实现细节的场合,或者需要在多个实现之间…

泷羽sec学习打卡-shodan扫描4

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于shodan的那些事儿-4 一、shodan4如何查看公网ip?如何查看自己的ip?如何查看出…

杨传辉:云+AI 时代的一体化数据库|OceanBase发布会实录

在 2024 OceanBase 年度发布会 上, OceanBase CTO 杨传辉进行了主题为《云和 AI 时代的一体化数据库战略思考》的演讲,本文为演讲实录,欢迎阅读。 视频观看可点击:https://www.oceanbase.com/video/9001825 各位 OceanBase 的客…

04 深入 Oracle 并发世界:MVCC、锁、闩锁、事务隔离与并发性能优化的探索

文章目录 深入 Oracle 并发世界:MVCC、锁、闩锁、事务隔离与并发性能优化的探索一、多版本并发控制(MVCC)1.1 理论解析1.2 实践应用 二、锁与闩锁机制2.1 理论解析2.2 实践应用 三、事务隔离级别3.1 理论解析3.2 实践应用 四、死锁预防与解决…

Python-利用tkinter库编写一个exe伪恶意程序文件(下)

前言 接着上篇所讲的,我们已经完成了源代码的准备,并将其储存在了function_1.py文件中。接下来我们将把function_1.py文件编写为相对应的exe文件。那么好,废话不多说,我们直接开始。(温馨提示:由于整蛊的需…