「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提示小应用 ...

本篇教程将实现一个打卡提示小应用，通过用户输入时间举行提示设置，并展示实时提示状态，实现提示设置和取消等功能。

---

关键词

• 打卡提示
  
• 状态管理
  
• 定时任务
  
• 输入校验
  
• UI交互
  

---

一、功能分析

打卡提示小应用包罗以下功能：

• 提示时间输入与设置：支持输入格式化时间并举行提示设置。
  
• 提示触发与状态提示：在设定时间到达时触发提示关照。
  
• 取消提示：支持用户取消已设置的提示。
  
• 图片装饰：通过图片展示提升界面趣味性。
  

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• TextInput 和 Button 组件用于用户输入和操作
  
• Text 组件用于展示提示状态
  
• Image 组件用于装饰界面
  
• @State 修饰符用于状态管理
  

---

三、项目结构

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

---

四、代码实现

1. 打卡提示页面代码

1. // 文件名：ReminderPage.ets
3. @Component
4. export struct ReminderPage {
5.   @State reminderTime: string = ''; // 提醒时间输入
6.   @State reminderStatus: string = '未设置提醒'; // 提醒状态
7.   private timerId: number | null = null; // 定时器ID
9.   // 设置提醒
10.   setReminder(): void {
11.     if (!this.reminderTime.includes(':')) {
12.       this.reminderStatus = '请输入正确格式的时间 (HH:mm)';
13.       return;
14.     }
16.     const timeParts = this.reminderTime.split(':');
17.     if (timeParts.length !== 2) {
18.       this.reminderStatus = '时间格式错误，请使用 HH:mm 格式';
19.       return;
20.     }
22.     const hours = parseInt(timeParts[0], 10);
23.     const minutes = parseInt(timeParts[1], 10);
25.     if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours >= 24 || minutes < 0 || minutes >= 60) {
26.       this.reminderStatus = '时间值不合法，请检查输入';
27.       return;
28.     }
30.     const now = new Date();
31.     const targetTime = new Date();
32.     targetTime.setHours(hours, minutes, 0, 0);
34.     const delay = targetTime.getTime() - now.getTime();
35.     if (delay <= 0) {
36.       this.reminderStatus = '提醒时间已过，请设置未来时间';
37.       return;
38.     }
40.     this.reminderStatus = `提醒已设置，时间：${this.reminderTime}`;
41.     this.timerId = setTimeout(() => {
42.       this.showNotification();
43.     }, delay);
44.   }
46.   // 提醒触发
47.   showNotification(): void {
48.     this.reminderStatus = '时间到！请打卡';
49.   }
51.   // 取消提醒
52.   cancelReminder(): void {
53.     if (this.timerId !== null) {
54.       clearTimeout(this.timerId);
55.       this.timerId = null;
56.     }
57.     this.reminderStatus = '提醒已取消';
58.   }
60.   build(): void {
61.     Column({ space: 20 }) {
62.       Text('打卡提醒小应用')
63.         .fontSize(24)
64.         .fontWeight(FontWeight.Bold)
65.         .alignSelf(ItemAlign.Center);
67.       // 输入提醒时间
68.       Row({ space: 10 }) {
69.         TextInput({
70.           placeholder: '请输入提醒时间 (HH:mm)',
71.           text: this.reminderTime,
72.         }).width(200)
73.           .onChange((value: string) => (this.reminderTime = value));
75.         Button('设置提醒')
76.           .onClick(() => this.setReminder())
77.           .width(120)
78.           .height(40);
80.         Button('取消提醒')
81.           .onClick(() => this.cancelReminder())
82.           .width(120)
83.           .height(40);
84.       }
85.       .alignSelf(ItemAlign.Center);
87.       // 提醒状态展示
88.       Text(`当前状态：${this.reminderStatus}`)
89.         .fontSize(18)
90.         .margin({ top: 20 });
92.       // 添加图片装饰
93.       Image($r('app.media.cat'))
94.         .width(305)
95.         .height(360)
96.         .alignSelf(ItemAlign.Center);
97.     }
98.     .padding(20)
99.     .width('100%')
100.     .height('100%');
101.   }
102. }

复制代码

---

2. 主入口文件

1. // 文件名：Index.ets
3. import { ReminderPage } from './ReminderPage';
5. @Entry
6. @Component
7. struct Index {
8.   build() {
9.     Column() {
10.       ReminderPage() // 调用提醒页面
11.     }
12.     .padding(20);
13.   }
14. }

复制代码

---

   效果示例：用户可以输入提示时间，并在设定时间到达时收到提示关照。
  效果展示：

  

---

五、代码解读

• 时间输入校验与解析
  
  
  
  • 提示时间通过 TextInput 输入，并使用 split 拆分成小时和分钟，通过 parseInt 分别解析为整数。
    
  
  
• 状态更新与定时任务
  
  
  
  • 使用 setTimeout 设置定时任务，到达提示时间时更新状态提示用户打卡。
    
  
  
• 取消提示功能
  
  
  
  • 提供“取消提示”按钮，通过 clearTimeout 取消定时任务，并更新提示状态。
    
  
  
• 图片装饰
  
  
  
  • 使用 Image 组件展示 cat.png 图片，提升界面趣味性和视觉效果。
    
  
  

---

六、优化建议

• 添加周期性提示功能，比方逐日固定时间提示。
  
• 增长提示提示音，增强提示效果。
  
• 提供提示历史记录，便于用户检察过往提示信息。
  

---

七、效果展示

• 提示设置与取消：用户可输入提示时间并取消提示。
  
• 状态更新：界面实时更新提示状态并提供反馈。
  
• 图片装饰：增长趣味性装饰图片，提升界面交互体验。
  

---

八、相干知识点

• 「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput组件获取用户输入
  
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解
  

---

小结

本篇教程展示了如何使用状态管理和定时任务，实现一个简单的打卡提示小应用，学习了输入校验、界面状态更新和用户交互的根本开发方法。

---

下一篇预告

在下一篇「UI互动应用篇31 - 滑动解锁屏幕功能」中，将实现滑动解锁功能，通过滑动操作实现屏幕解锁的交互效果。

---

上一篇： 「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询体系

下一篇： 「Mac畅玩鸿蒙与硬件54」UI互动应用篇31 - 滑动解锁屏幕功能

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=667
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---

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