「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用 ...

本篇将带你实现一个番茄钟倒计时应用，用户可以设置专注时间和休息时间的时长，点击“开始专注”或“开始休息”按钮启动计时，应用会在倒计时竣事时进行提醒。番茄钟应用对于管理时间、提升工作服从非常有资助，而且还会参加猫咪图片作为界面装饰，让体验更加风趣。

---

关键词

• UI互动应用
  
• 番茄钟
  
• 倒计时器
  
• 状态管理
  
• 用户交互
  

---

一、功能说明

番茄钟倒计时应用答应用户设置专注时间和休息时间，专注时间用于工作，休息时间用于放松。应用通过倒计时表现当前剩余时间，并在倒计时竣事后提醒用户进行下一阶段。界面上还添加了一只猫咪图片作为装饰。

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Column 结构组件
  
• Image 组件用于表现猫咪图片
  
• Text 组件用于表现倒计时和阶段提示
  
• Button 组件用于用户交互
  
• TextInput 组件用于输入专注和休息时间
  
• 定时器函数 setInterval 和 clearInterval 用于控制倒计时
  
• @State 修饰符用于状态管理
  

项目结构

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

---

三、代码实现

1. // 文件名：PomodoroTimerPage.ets
3. // 定义番茄钟倒计时页面组件
4. @Component
5. export struct PomodoroTimerPage {
6.   @State focusTime: number = 25 * 60; // 默认专注时间为25分钟（单位：秒）
7.   @State breakTime: number = 5 * 60; // 默认休息时间为5分钟（单位：秒）
8.   @State timeLeft: number = this.focusTime; // 倒计时时间
9.   @State isFocusMode: boolean = true; // 当前阶段：专注或休息
10.   @State isCountingDown: boolean = false; // 倒计时状态
11.   private timerId: number | null = null; // 定时器 ID
13.   // 构建页面布局和组件
14.   build() {
15.     Column({ space: 20 }) { // 创建垂直布局容器，子组件间距为 20
16.       // 显示猫咪图片
17.       Image($r('app.media.cat'))
18.         .width('22%')
19.         .height('49%')
20.         .margin({ bottom: 20 })
21.         .alignSelf(ItemAlign.Center);
23.       // 显示当前阶段
24.       Text(this.isFocusMode ? '专注时间' : '休息时间')
25.         .fontSize(24)
26.         .fontWeight(FontWeight.Bold)
27.         .alignSelf(ItemAlign.Center);
29.       // 显示倒计时时间
30.       Text(`剩余时间: ${this.formatTime(this.timeLeft)}`)
31.         .fontSize(20)
32.         .alignSelf(ItemAlign.Center)
33.         .fontColor(this.timeLeft > 0 ? Color.Black : Color.Red);
35.       // 开始倒计时按钮
36.       Button(this.isCountingDown ? '暂停' : (this.isFocusMode ? '开始专注' : '开始休息'))
37.         .onClick(() => {
38.           if (this.isCountingDown) {
39.             this.pauseCountdown();
40.           } else {
41.             this.startCountdown();
42.           }
43.         })
44.         .fontSize(20)
45.         .backgroundColor(this.isCountingDown ? Color.Red : (this.isFocusMode ? Color.Blue : Color.Green))
46.         .fontColor(Color.White)
47.         .margin({ top: 20 });
49.       // 重置按钮
50.       Button('重置')
51.         .onClick(() => this.resetCountdown())
52.         .fontSize(20)
53.         .backgroundColor(Color.Gray)
54.         .fontColor(Color.White)
55.         .margin({ top: 10 });
57.       // 设置专注时间和休息时间
58.       Row({ space: 10 }) {
59.         TextInput({ placeholder: '设置专注时间（分钟）' })
60.           .type(InputType.Number)
61.           .onChange((value: string) => {
62.             this.focusTime = (parseInt(value) || 25) * 60;
63.             if (this.isFocusMode) {
64.               this.timeLeft = this.focusTime;
65.             }
66.           });
68.         TextInput({ placeholder: '设置休息时间（分钟）' })
69.           .type(InputType.Number)
70.           .onChange((value: string) => {
71.             this.breakTime = (parseInt(value) || 5) * 60;
72.             if (!this.isFocusMode) {
73.               this.timeLeft = this.breakTime;
74.             }
75.           })
76.       }
77.       .justifyContent(FlexAlign.Center)
78.     }
79.     .padding(20)
80.     .width('100%')
81.     .height('100%')
82.     .alignItems(HorizontalAlign.Center);
83.   }
85.   // 格式化倒计时时间
86.   private formatTime(seconds: number): string {
87.     const minutes = Math.floor(seconds / 60);
88.     const remainingSeconds = seconds % 60;
89.     return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
90.   }
92.   // 开始倒计时的方法
93.   private startCountdown() {
94.     this.isCountingDown = true;
95.     this.timerId = setInterval(() => {
96.       if (this.timeLeft > 0) {
97.         this.timeLeft -= 1;
98.       } else {
99.         this.switchMode(); // 切换到下一个阶段
100.       }
101.     }, 1000);
102.   }
104.   // 暂停倒计时的方法
105.   private pauseCountdown() {
106.     this.isCountingDown = false;
107.     if (this.timerId !== null) {
108.       clearInterval(this.timerId);
109.       this.timerId = null;
110.     }
111.   }
113.   // 重置倒计时的方法
114.   private resetCountdown() {
115.     this.pauseCountdown();
116.     this.timeLeft = this.isFocusMode ? this.focusTime : this.breakTime;
117.   }
119.   // 切换专注和休息阶段
120.   private switchMode() {
121.     this.pauseCountdown();
122.     this.isFocusMode = !this.isFocusMode;
123.     this.timeLeft = this.isFocusMode ? this.focusTime : this.breakTime;
124.   }
125. }

复制代码

1. // 文件名：Index.ets
3. // 导入番茄钟倒计时页面组件
4. import { PomodoroTimerPage } from './PomodoroTimerPage'
6. // 定义应用入口组件
7. @Entry
8. @Component
9. struct Index {
10.   build() {
11.     Column() {
12.       PomodoroTimerPage() // 引用番茄钟页面组件
13.     }
14.     .padding(20) // 设置页面内边距
15.   }
16. }

复制代码

  结果示例：用户可以设置专注和休息时间，点击“开始专注”或“开始休息”按钮后，倒计时将开始，倒计时竣事时主动切换到下一个阶段。页面包含猫咪图片装饰，提升用户的使用体验。
  

  

---

四、代码解读

• @State timeLeft：保存倒计时剩余时间，倒计时每秒减少 1，当时间为 0 时切换到下一个阶段。
  
• @State isFocusMode：用于标识当前是专注模式照旧休息模式，每当倒计时竣事时切换。
  
• startCountdown() 方法：使用 setInterval 启动倒计时，每秒减少 timeLeft 值。
  
• pauseCountdown() 方法：暂停倒计时并扫除定时器。
  
• switchMode() 方法：倒计时竣事后切换到下一个阶段，并重新设置 timeLeft 为下一个阶段的时长。
  

---

五、优化建议

• 增加音效提醒：在每个阶段切换时播放提示音，资助用户区分工作与休息。
  
• 动画结果：在倒计时减少时添加动画结果，如进度条或颜色厘革。
  
• 汗青纪录：纪录每次专注和休息的时长，资助用户回首和分析本身的时间使用环境。
  

---

六、相关知识点

• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
  
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  

---

小结

本篇教程通过番茄钟倒计时应用的实现，展示了如何灵活使用状态管理和定时器控制来实现更复杂的时间管理功能，并联合专注和休息模式切换，资助用户公道安排时间，进步服从。

---

下一篇预告

在下一篇「UI互动应用篇10 - 拼图小游戏」中，我们将探索一个风趣的项目，展示如何联合状态和动态图片实现更丰富的用户互动体验。

---

上一篇： 「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自界说评分星级组件

下一篇：「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 拼图小游戏

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。