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

本篇将向导你实现一个实用的计时器应用，用户可以启动、停息或重置计时器。该项目将涉实时间控制、状态管理以及按钮交互，是把握鸿蒙应用开辟的告急步调。

---

关键词

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

---

一、功能分析

在这个计时器应用中，用户可以通过按钮来启动、停息和重置计时器。计时器会实时更新并表现时间，利用户可以或许体验到动态 UI 更新的效果。

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Text 组件用于表现计时
  
• Button 组件用于用户交互
  
• setInterval 方法实现时间控制
  

项目布局

• 项目名称：TimerApp
  
• 自界说组件名称：TimerPage
  
• 代码文件：TimerPage.ets、Index.ets
  

---

三、代码实现

1. // TimerPage.ets
2. @Component
3. export struct TimerPage {
4.   @State timerValue: number = 0; // 控制计时器的值
5.   @State isRunning: boolean = false; // 控制计时器状态
6.   private intervalId: number | null = null; // 定时器 ID
8.   build() {
9.     Column({ space: 20 }) {
10.       // 显示当前计时器值
11.       Text(`${Math.floor(this.timerValue / 60).toString().padStart(2, '0')}:${(this.timerValue % 60).toString().padStart(2, '0')}`)
12.         .fontSize(48)
13.         .fontWeight(FontWeight.Bold)
14.         .alignSelf(ItemAlign.Center);
16.       // 按钮交互行
17.       Row({ space: 20 }) {
18.         Button(this.isRunning ? '暂停' : '开始')
19.           .onClick(() => {
20.             if (this.isRunning) {
21.               this.stopTimer(); // 暂停计时器
22.             } else {
23.               this.startTimer(); // 启动计时器
24.             }
25.           });
27.         Button('重置')
28.           .onClick(() => {
29.             this.resetTimer(); // 重置计时器
30.           });
31.       }
32.       .justifyContent(FlexAlign.Center);
33.     }
34.     .padding(20)
35.     .height('100%')
36.     .width('100%')
37.     .alignItems(HorizontalAlign.Center);
38.   }
40.   private startTimer() {
41.     this.isRunning = true;
42.     if (this.intervalId === null) {
43.       this.intervalId = setInterval(() => {
44.         this.timerValue += 1;
45.       }, 1000);
46.     }
47.   }
49.   private stopTimer() {
50.     this.isRunning = false;
51.     if (this.intervalId !== null) {
52.       clearInterval(this.intervalId);
53.       this.intervalId = null;
54.     }
55.   }
57.   private resetTimer() {
58.     this.stopTimer();
59.     this.timerValue = 0;
60.   }
61. }

复制代码

1. // Index.ets
2. import { TimerPage } from './TimerPage'
4. @Entry
5. @Component
6. struct Index {
7.   build() {
8.     Column() {
9.       TimerPage() // 调用自定义组件
10.     }
11.     .padding(20) // 设置页面内边距
12.   }
13. }

复制代码

  效果示例：用户点击“开始”按钮时，计时器开始计时；点击“停息”按钮，计时器停息；点击“重置”按钮，计时器重置为 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 - 倒计时和提示功能实现

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=273
來源：坚果派
著作权归作者全部。贸易转载请接洽作者得到授权，非贸易转载请注明出处。

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金