鸿蒙中 倒计时实现方法

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,需后台持久化选 代理提醒实况窗 ,复杂交互场景用 自定义组件

相关推荐
心态还需努力呀1 小时前
把 Flameshot 编译进鸿蒙 PC:一次 Qt C++ 截图工具的源码级移植实战
c++·qt·harmonyos
心态还需努力呀2 小时前
把 Zettlr 搬上鸿蒙 PC:一次 Electron 应用移植实战
华为·electron·harmonyos
OH_TPC2 小时前
HarmonyOS APP开发---“心动卡“社交匹配App,需要用到这个库
华为·harmonyos·鸿蒙
●VON2 小时前
Flutter 鸿蒙插件适配实战:用 is_lock_screen 2.0.0 判断真实锁屏状态
flutter·华为·harmonyos
Sunny_G2 小时前
鸿蒙 Markdown 编辑器表格所见即所得:七个版本的渲染重构(CodeMirror Decoration 实战)
ai编程·harmonyos
linnux领域3 小时前
eNSP 交换机与电脑不在一个网段?用一台 Windows 双网卡做路由,把实验环境彻底打通
windows·华为·电脑·ensp·静态路由·网络实验·ensp模拟器
●VON4 小时前
Flutter 鸿蒙插件适配实战:用 flutter_timezone_observer 1.2.0 监听系统时区变化
flutter·华为·harmonyos
云运维笔记4 小时前
华为VRP系统文件管理全攻略
前端·华为
●VON4 小时前
Flutter 鸿蒙 app_install_date 0.1.5 使用实战:读取应用安装时间
flutter·华为·harmonyos
Dream-Y.ocean4 小时前
鸿蒙平台 Apache Tomcat 管理控制台适配实战:基于 Electron 壳方案的真实 HTTP 服务器实现
tomcat·apache·harmonyos