鸿蒙中 倒计时实现方法

1. TextTimer 组件(UI 轻量级倒计时)

适用场景:界面可见时倒计时(如页面内的临时倒计时显示)

特性

  • 组件可见时自动计时,不可见时暂停(通过 onVisibleAreaChange控制)

  • 支持正/倒计时模式(isCountDown参数)

  • 时间格式自动转换为文本

    import { TextTimer, TimerController } from '@ohos.arkui.advanced';

    @Entry
    @Component
    struct CountDownPage {
    private controller: TimerController = new TimerController();

    复制代码
    build() {
      Column() {
        // 倒计时3秒,单位毫秒
        TextTimer({
          isCountDown: true,
          count: 3000 // 3秒
        })
          .fontSize(20)
          .onTimerEnd(() => {
            console.info('倒计时结束');
          })
      }
    }

    }

注意:退至后台时计时暂停,仅适用于前台倒计时场景。

2. 自定义组件 + 定时器(灵活控制)

适用场景 :需要精细控制状态(暂停/继续/重置)的复杂倒计时
步骤

  • 使用 @State管理剩余时间

  • 通过 setInterval更新状态

  • 生命周期方法管理定时器启停

    @Component
    struct CustomTimer {
    @State remainingTime: number = 3; // 3秒
    private timerId: number = 0;

    复制代码
    // 开始倒计时
    startCountdown() {
      this.timerId = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
        } else {
          clearInterval(this.timerId);
        }
      }, 1000);
    }
    
    aboutToAppear() {
      this.startCountdown();
    }
    
    aboutToDisappear() {
      clearInterval(this.timerId);
    }
    
    build() {
      Text(`${this.remainingTime}s`)
    }

    }

备注

  • 添加暂停/继续逻辑(保存 timerId并控制 clearInterval
  • 使用 @StorageLink实现跨页面状态同步

3. 代理提醒(后台持久化倒计时)

适用场景 :应用退至后台仍需触发的倒计时
特性

  • 系统代理执行,进程终止仍生效

  • 需申请权限 ohos.permission.PUBLISH_AGENT_REMINDER

    import { reminderAgentManager } from '@kit.BackgroundTasksKit';

    // 发布10秒倒计时提醒
    let timerReminder: reminderAgentManager.ReminderRequestTimer = {
    reminderType: reminderAgentManager.ReminderType.REMINDER_TYPE_TIMER,
    triggerTimeInSeconds: 10, // 10秒后触发
    title: '倒计时结束',
    content: '任务已完成'
    };

    reminderAgentManager.publishReminder(timerReminder)
    .then(reminderId => {
    console.info(提醒ID: ${reminderId});
    });

4. 实况窗(Live Window)

适用场景 :实时同步倒计时到桌面卡片
优势

  • 系统级卡片展示,无需应用保活

  • 与应用内倒计时自动同步

    // 在实况窗组件中配置倒计时属性
    LiveWindow({
    duration: 60000, // 60秒倒计时
    format: 'mm:ss' // 显示格式
    })

说明 :需在 module.json5中声明 "abilities.formEnabled": true

注意事项

  1. 后台限制setInterval在应用退后台时会被冻结,需依赖代理提醒或实况窗实现持久化。
  2. 权限规范:代理提醒需向华为申请,滥用可能导致审核失败。
  3. 精度选择 :秒级精度用 setInterval(1000),毫秒级需结合requestAnimationFrame

根据需求选择合适方案:轻量级选 TextTimer,需后台持久化选 代理提醒实况窗 ,复杂交互场景用 自定义组件

相关推荐
Huang兄19 分钟前
鸿蒙-List和Grid拖拽排序:仿微信小程序删除效果
harmonyos·arkts·arkui
anyup19 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Ranger09291 天前
鸿蒙开发新范式:Gpui
rust·harmonyos
Huang兄1 天前
鸿蒙-深色模式适配
harmonyos·arkts·arkui
SummerKaze3 天前
为鸿蒙开发者写一个 nvm:hmvm 的设计与实现
harmonyos
在人间耕耘5 天前
HarmonyOS Vision Kit 视觉AI实战:把官方 Demo 改造成一套能长期复用的组件库
人工智能·深度学习·harmonyos
王码码20355 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos
HarmonyOS_SDK5 天前
【FAQ】HarmonyOS SDK 闭源开放能力 — Ads Kit
harmonyos
Swift社区5 天前
如何利用 ArkUI 框架优化鸿蒙应用的渲染性能
华为·harmonyos
特立独行的猫a5 天前
uni-app x跨平台开发实战:开发鸿蒙HarmonyOS影视票房榜组件完整实现过程
华为·uni-app·harmonyos·轮播图·uniapp-x