鸿蒙中 倒计时实现方法

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

相关推荐
lzhdim2 小时前
华为手机介绍
华为·智能手机
sinat_3842410912 小时前
HarmonyOS音乐播放器开发实战:从零到一打造完整鸿蒙系统音乐播放器应用 2
华为·gitlab·intellij-idea·harmonyos·visual studio·webstorm
waeng_luo13 小时前
HarmonyOS开发-多线程与异步编程
harmonyos·鸿蒙2025领航者闯关·鸿蒙6实战·#鸿蒙2025领航者闯关
花开彼岸天~14 小时前
鸿蒙平台使用 `video_thumbnail` 插件指南
华为·harmonyos
特立独行的猫a14 小时前
QT开发鸿蒙PC应用:环境搭建及第一个HelloWorld
开发语言·qt·harmonyos·环境搭建·鸿蒙pc
花开彼岸天~14 小时前
Flutter跨平台开发鸿蒙化定位组件使用指南
flutter·华为·harmonyos
sinat_3842410915 小时前
HarmonyOS音乐播放器开发实战:从零到一打造完整鸿蒙系统音乐播放器应用 1
华为·harmonyos
yenggd16 小时前
华为批量下发配置命令使用telnetlib模块
网络·python·华为
个案命题17 小时前
鸿蒙ArkUI状态管理新宠:@Once装饰器全方位解析与实战
华为·harmonyos