「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 - 倒计时和提醒功能实现

相关推荐
写雨.03 小时前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
千鼎数字孪生-可视化8 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
goto_w8 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
跟着珅聪学java11 小时前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
别说我什么都不会1 天前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活1 天前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师1 天前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
博观而约取1 天前
Linux 和 macOS 终端中常见的快捷键操作
linux·运维·macos
小脑斧爱吃鱼鱼1 天前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
Alger_Hamlet1 天前
Photoshop 2025 Mac中文 Ps图像编辑软件
macos·ui·photoshop