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

相关推荐
前端开发与ui设计的老司机1 分钟前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
枫叶丹427 分钟前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
liliangcsdn34 分钟前
在mac m1基于llama.cpp运行deepseek
人工智能·macos·语言模型·llama
silence25044 分钟前
macOS 上安装 Miniconda + Conda-Forge
macos·conda
sky丶Mamba1 小时前
CMD,PowerShell、Linux/MAC设置环境变量
linux·运维·macos
前端开发与ui设计的老司机1 小时前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机10 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界12 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
FreeBuf_13 小时前
原子级 macOS 信息窃取程序升级:新增后门实现持久化控制
macos·信息窃取
阿巴~阿巴~14 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos