HarmonyOS TextTimer中的format属性刷新后,计时器为什么归零了?

@Entry
@Component
export default struct TextTimerRecord {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss'

  build() {
    Row() {
      TextTimer({ controller: this.textTimerController })
        .format(this.format)
        .fontSize('24px')
        .fontWeight(FontWeight.Bolder)
        .fontColor(Color.White)
        .fontFamily('HarmonyOS Sans SC')
        .onTimer((utc: number, elapsedTime: number) => {
          if (elapsedTime == 30) {
            this.format = 'HH:mm:ss';
          }
        })
        .onAppear(() => {
          this.textTimerController.start()
        })
    }
  }
}

上述代码想实现的功能是,当时间到达1小时后,可以出现小时数;(我不太清楚在format属性设置为mm:ss,时间到达一小时后是否会自动转换为hh:mm:ss,所以采用了上述写法来验证);上述的代码的问题是,到达指定时间(elapsedTime)后,格式会刷新,但是计时器重置为零了。想请教下怎么解决呀,或者有其他办法实现我的需求

阅读 464
1 个回答

利用setInterval自己设计一个计时器,然后将时间格式化即可,示例代码如下(可以设置从某个特定时间开始计时)

class CountUpTimer {
  public startTime: number;
  public intervalId: number;
  public timeStr: string = '';

  constructor(startTime: number) {
    this.startTime = startTime;
    this.intervalId = 0;
  }

  start() {
    this.intervalId = setInterval(() => {
      this.startTime++;
      this.timeStr = this.FormatSecondsAsHoursMinutes(this.startTime);
    }, 1000);
  }

  stop() {
    clearInterval(this.intervalId);
  }

  FormatSecondsAsHoursMinutes(seconds: number): string {
    let hours = Math.floor(seconds / 3600); // 计算小时
    let minutes = Math.floor((seconds % 3600) / 60); // 计算分钟
    let remainingSeconds = seconds % 60; // 计算剩余秒数
    if (hours > 0) {
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString()
        .padStart(2, '0')}`;
    }
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  }
}