当前位置: 首页 > article >正文

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

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

在这里插入图片描述


关键词
  • 打卡提醒
  • 状态管理
  • 定时任务
  • 输入校验
  • UI交互

一、功能说明

打卡提醒小应用包含以下功能:

  1. 提醒时间输入与设置:支持输入格式化时间并进行提醒设置。
  2. 提醒触发与状态提示:在设定时间到达时触发提醒通知。
  3. 取消提醒:支持用户取消已设置的提醒。
  4. 图片装饰:通过图片展示提升界面趣味性。

二、所需组件
  • @Entry@Component 装饰器
  • TextInputButton 组件用于用户输入和操作
  • Text 组件用于展示提醒状态
  • Image 组件用于装饰界面
  • @State 修饰符用于状态管理

三、项目结构
  • 项目名称ClockReminderApp
  • 自定义组件名称ReminderPage
  • 代码文件ReminderPage.etsIndex.ets

四、代码实现
1. 打卡提醒页面代码
// 文件名:ReminderPage.ets

@Component
export struct ReminderPage {
  @State reminderTime: string = ''; // 提醒时间输入
  @State reminderStatus: string = '未设置提醒'; // 提醒状态
  private timerId: number | null = null; // 定时器ID

  // 设置提醒
  setReminder(): void {
    if (!this.reminderTime.includes(':')) {
      this.reminderStatus = '请输入正确格式的时间 (HH:mm)';
      return;
    }

    const timeParts = this.reminderTime.split(':');
    if (timeParts.length !== 2) {
      this.reminderStatus = '时间格式错误,请使用 HH:mm 格式';
      return;
    }

    const hours = parseInt(timeParts[0], 10);
    const minutes = parseInt(timeParts[1], 10);

    if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours >= 24 || minutes < 0 || minutes >= 60) {
      this.reminderStatus = '时间值不合法,请检查输入';
      return;
    }

    const now = new Date();
    const targetTime = new Date();
    targetTime.setHours(hours, minutes, 0, 0);

    const delay = targetTime.getTime() - now.getTime();
    if (delay <= 0) {
      this.reminderStatus = '提醒时间已过,请设置未来时间';
      return;
    }

    this.reminderStatus = `提醒已设置,时间:${this.reminderTime}`;
    this.timerId = setTimeout(() => {
      this.showNotification();
    }, delay);
  }

  // 提醒触发
  showNotification(): void {
    this.reminderStatus = '时间到!请打卡';
  }

  // 取消提醒
  cancelReminder(): void {
    if (this.timerId !== null) {
      clearTimeout(this.timerId);
      this.timerId = null;
    }
    this.reminderStatus = '提醒已取消';
  }

  build(): void {
    Column({ space: 20 }) {
      Text('打卡提醒小应用')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 输入提醒时间
      Row({ space: 10 }) {
        TextInput({
          placeholder: '请输入提醒时间 (HH:mm)',
          text: this.reminderTime,
        }).width(200)
          .onChange((value: string) => (this.reminderTime = value));

        Button('设置提醒')
          .onClick(() => this.setReminder())
          .width(120)
          .height(40);

        Button('取消提醒')
          .onClick(() => this.cancelReminder())
          .width(120)
          .height(40);
      }
      .alignSelf(ItemAlign.Center);

      // 提醒状态展示
      Text(`当前状态:${this.reminderStatus}`)
        .fontSize(18)
        .margin({ top: 20 });

      // 添加图片装饰
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}

2. 主入口文件
// 文件名:Index.ets

import { ReminderPage } from './ReminderPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      ReminderPage() // 调用提醒页面
    }
    .padding(20);
  }
}

效果示例:用户可以输入提醒时间,并在设定时间到达时收到提醒通知。

效果展示
在这里插入图片描述


五、代码解读
  1. 时间输入校验与解析

    • 提醒时间通过 TextInput 输入,并使用 split 拆分成小时和分钟,通过 parseInt 分别解析为整数。
  2. 状态更新与定时任务

    • 使用 setTimeout 设置定时任务,到达提醒时间时更新状态提示用户打卡。
  3. 取消提醒功能

    • 提供“取消提醒”按钮,通过 clearTimeout 取消定时任务,并更新提醒状态。
  4. 图片装饰

    • 使用 Image 组件展示 cat.png 图片,提升界面趣味性和视觉效果。

六、优化建议
  1. 添加周期性提醒功能,例如每日固定时间提醒。
  2. 增加提醒提示音,增强提醒效果。
  3. 提供提醒历史记录,便于用户查看过往提醒信息。

七、效果展示
  • 提醒设置与取消:用户可输入提醒时间并取消提醒。
  • 状态更新:界面实时更新提醒状态并提供反馈。
  • 图片装饰:增加趣味性装饰图片,提升界面交互体验。

八、相关知识点
  • 「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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



http://www.kler.cn/a/466349.html

相关文章:

  • Hello 2025
  • 数据结构:树
  • SpringBoot Maven 项目 pom 中的 plugin 插件用法整理
  • 认识一下,轻量消息推送 Server-Sent Events
  • 从 TiDB 学习分布式数据库测试
  • FPGA、STM32、ESP32、RP2040等5大板卡,结合AI,更突出模拟+数字+控制+算法
  • Chapter2 文本规范化
  • #C02L02P01. C02.L02.一维数组最值问题.知识点1.求最大值
  • Elasticsearch:利用 AutoOps 检测长时间运行的搜索查询
  • 【2025最新计算机毕业设计】基于SpringBoot+Vue智慧养老医护系统(高质量源码,提供文档,免费部署到本地)【提供源码+答辩PPT+文档+项目部署】
  • unity学习2:关于最近github的2FA(two-factor authentication)新认证
  • 深入理解正则表达式及基本使用教程
  • 图像转换 VM与其他格式互转
  • CLIP论文笔记
  • 2025年度全国会计专业技术资格考试 (甘肃考区)报名公告
  • 从 SQL 到 SPL:分组后每组前面增加符合条件的记录
  • 分布式练手:Server
  • 如何得到深度学习模型的参数量和计算复杂度
  • 【图像处理】OpenCv + Python 实现 Photoshop 中的色彩平衡功能
  • 机器学习经典算法——逻辑回归
  • 在K8S中,Pod请求另一个Pod偶尔出现超时或延迟,如何排查?
  • 【LeetCode】803、打砖块
  • BurpSuite2024.11
  • JLINK V9插入电脑没反应
  • 基于深度学习的视觉检测小项目(二) 环境和框架搭建
  • pytorch张量高级索引介绍