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

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


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

一、功能说明

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


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

三、代码实现
typescript 复制代码
// 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;
  }
}
typescript 复制代码
// Index.ets
import { TimerPage } from './TimerPage'

@Entry
@Component
struct Index {
  build() {
    Column() {
      TimerPage() // 调用自定义组件
    }
    .padding(20) // 设置页面内边距
  }
}

效果示例 :用户点击"开始"按钮时,计时器开始计时;点击"暂停"按钮,计时器暂停;点击"重置"按钮,计时器重置为 0。


四、代码解读
  • setInterval()

    用于每秒更新一次 timerValue,实现计时功能。

  • clearInterval()

    用于停止计时器,避免计时继续。

  • @State 修饰符

    管理组件状态,确保计时器值和按钮显示的动态更新。


五、相关知识点

小结

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


下一篇预告

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


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

相关推荐
小梦白21 分钟前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
周胡杰29 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
名字不要太长 像我这样就好1 小时前
【iOS】继承链
macos·ios·cocoa
潜龙95272 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
玄辰星君11 小时前
【MAC】nacos 2.5.1容器docker安装
macos·docker·nacos
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
atwdy16 小时前
MacOS安装linux虚拟机
linux·运维·ubuntu·macos·utm
R-G-B16 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
echola_mendes17 小时前
Dify:在MacOS系统下Dify的本地部署与使用
macos