HarmonyOS鸿蒙Next中如何实现计时器功能？

HarmonyOS鸿蒙Next中如何实现计时器功能？ 我需要在答题页面实现计时功能，显示已用时间，并在页面销毁时清理定时器，如何实现？

4 回复

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-timer#settimeout

更多关于HarmonyOS鸿蒙Next中如何实现计时器功能？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


实现思路：

  1. 使用 setInterval 创建定时器，每秒更新时间：
@State quizTime: number = 0;
private timerId: number = -1;

startTimer() {
  this.timerId = setInterval(() => {
    this.quizTime++;
  }, 1000);
}
  1. 在 aboutToDisappear 生命周期中清理定时器：
aboutToDisappear() {
  if (this.timerId !== -1) {
    clearInterval(this.timerId);
  }
}
  1. 格式化时间显示为 MM:SS 格式：
formatTime(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
  1. 完整示例代码：
@Entry
@Component
struct TimerExample {
  @State quizTime: number = 0;
  @State isRunning: boolean = false;
  private timerId: number = -1;

  aboutToDisappear() {
    this.stopTimer();
  }

  startTimer() {
    if (this.isRunning) return;
    this.isRunning = true;
    this.timerId = setInterval(() => {
      this.quizTime++;
    }, 1000);
  }

  stopTimer() {
    if (this.timerId !== -1) {
      clearInterval(this.timerId);
      this.timerId = -1;
    }
    this.isRunning = false;
  }

  resetTimer() {
    this.stopTimer();
    this.quizTime = 0;
  }

  formatTime(seconds: number): string {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }

  build() {
    Column({ space: 24 }) {
      Text('计时器').fontSize(20).fontWeight(FontWeight.Bold)
      Text(this.formatTime(this.quizTime)).fontSize(64).fontWeight(FontWeight.Bold)

      Row({ space: 16 }) {
        Button(this.isRunning ? '暂停' : '开始')
          .backgroundColor(this.isRunning ? '#FF9500' : '#34C759')
          .onClick(() => this.isRunning ? this.stopTimer() : this.startTimer())
        Button('重置').backgroundColor('#F0F0F0').fontColor('#666666')
          .onClick(() => this.resetTimer())
      }

      Row({ space: 8 }) {
        Circle().width(8).height(8).fill(this.isRunning ? '#34C759' : '#CCCCCC')
        Text(this.isRunning ? '计时中' : '已暂停').fontSize(14).fontColor('#999999')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在HarmonyOS Next中，可通过@State和@Builder装饰器结合setInterval或setTimeout实现计时器。例如，使用@State定义时间变量，在aboutToAppear中启动定时器更新变量。也可用系统API如@ohos.backgroundTaskManager进行后台计时管理。

在HarmonyOS Next中，实现计时器功能并管理其生命周期，推荐使用[@State](/user/State)装饰器结合setInterval和clearInterval。以下是核心实现步骤：

  1. 定义状态与计时器ID：使用[@State](/user/State)装饰器管理已用时间（秒），并声明一个变量存储定时器ID以便清理。

    [@State](/user/State) private elapsedTime: number = 0; // 已用时间（秒）
private timerId: number | null = null; // 定时器ID

  2. 启动计时器：在页面显示时（如aboutToAppear生命周期）启动定时器，每秒更新elapsedTime。

    aboutToAppear(): void {
  this.timerId = setInterval(() => {
    this.elapsedTime += 1; // 每秒递增
  }, 1000);
}

  3. 清理计时器：在页面销毁时（如aboutToDisappear生命周期）清除定时器，避免内存泄漏。

    aboutToDisappear(): void {
  if (this.timerId !== null) {
    clearInterval(this.timerId);
    this.timerId = null;
  }
}

  4. 界面显示：在UI中使用Text组件绑定elapsedTime，并格式化为“分:秒”形式。

    Text(this.formatTime(this.elapsedTime))
  .fontSize(20)

    private formatTime(seconds: number): string {
  const min = Math.floor(seconds / 60);
  const sec = seconds % 60;
  return `${min}:${sec < 10 ? '0' : ''}${sec}`;
}

关键点：

  • 使用[@State](/user/State)确保时间更新触发UI刷新。
  • 在aboutToDisappear中清理定时器是必要的，防止后台持续运行。
  • 若需暂停/重置功能，可通过控制timerId的启停和重置elapsedTime实现。

此方法适用于答题、倒计时等场景，能有效管理定时器与页面生命周期同步。

回到顶部