鸿蒙中 倒计时实现方法

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

相关推荐
盐焗西兰花7 小时前
鸿蒙学习实战之路-Reader Kit修改翻页方式字体大小及行间距最佳实践
学习·华为·harmonyos
lbb 小魔仙11 小时前
【HarmonyOS实战】React Native 表单实战:在 OpenHarmony 上构建高性能表单
react native·华为·harmonyos
一只大侠的侠14 小时前
React Native开源鸿蒙跨平台训练营 Day16自定义 useForm 高性能验证
flutter·开源·harmonyos
早點睡39015 小时前
高级进阶 React Native 鸿蒙跨平台开发:@react-native-community-slider 滑块组件
react native·react.js·harmonyos
一只大侠的侠15 小时前
Flutter开源鸿蒙跨平台训练营 Day11从零开发商品详情页面
flutter·开源·harmonyos
一只大侠的侠15 小时前
React Native开源鸿蒙跨平台训练营 Day18自定义useForm表单管理实战实现
flutter·开源·harmonyos
一只大侠的侠15 小时前
React Native开源鸿蒙跨平台训练营 Day20自定义 useValidator 实现高性能表单验证
flutter·开源·harmonyos
听麟16 小时前
HarmonyOS 6.0+ 跨端智慧政务服务平台开发实战:多端协同办理与电子证照管理落地
笔记·华为·wpf·音视频·harmonyos·政务
前端世界16 小时前
从单设备到多设备协同:鸿蒙分布式计算框架原理与实战解析
华为·harmonyos
一只大侠的侠17 小时前
Flutter开源鸿蒙跨平台训练营 Day12从零开发通用型登录页面
flutter·开源·harmonyos