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_REMINDERimport { 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。
注意事项
- 后台限制 :
setInterval在应用退后台时会被冻结,需依赖代理提醒或实况窗实现持久化。 - 权限规范:代理提醒需向华为申请,滥用可能导致审核失败。
- 精度选择 :秒级精度用
setInterval(1000),毫秒级需结合requestAnimationFrame。
根据需求选择合适方案:轻量级选 TextTimer,需后台持久化选 代理提醒 或 实况窗 ,复杂交互场景用 自定义组件。