HarmonyOS NEXT实战：倒计时

HarmonyOS Next实战##HarmonyOS SDK应用服务##教育

目标：实现倒计时功能

知识点：
TextTimer通过文本显示计时信息并控制其计时器状态的组件。
在组件不可见时时间变动将停止，组件的可见状态基于onVisibleAreaChange处理，可见阈值ratios大于0即视为可见状态。

接口

TextTimer(options?: TextTimerOptions)

options：通过文本显示计时信息并控制其计时器状态的组件参数。

TextTimerOptions

• isCountDown：是否倒计时。值为true时，计时器开启倒计时，例如从30秒 ~ 0秒。值为false时，计时器开始计时，例如从0秒 ~ 30秒。默认值：false
• count：计时器时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为计时器初始值。否则，使用默认值为计时器初始值。默认值：60000
• controller：TextTimer控制器。

TextTimerController
TextTimer组件的控制器，用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器，组件创建完成后相关指令才能被调用。

TextTimerConfiguration

• count：计时器时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为倒计时初始值。否则，使用默认值为倒计时初始值。默认值：60000。
• isCountDown：是否倒计时。值为true时，计时器开启倒计时，例如从30秒 ~ 0秒。值为false时，计时器开始计时，例如从0秒 ~ 30秒。默认值：false
• started：是否已经开始了计时。
• elapsedTime：计时器经过的时间，单位为设置格式的最小单位。

TextTimer属性

• format：设置自定义格式，需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式，则使用默认值。
• textShadow：设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。不支持fill字段, 不支持智能取色模式。
• contentModifier：定制TextTimer内容区的方法。在TextTimer组件上，定制内容区的方法。

实战：CountdownDemoPage

@Entry
@Component
struct CountdownDemoPage {
   
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'
  @State isStart: boolean = false

  build() {
   
    Column({
    space: 10 }) {
   
      Text('倒计时Demo')
      TextTimer({
    isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) => {
   
          console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row({
    space: 20 }) {
   
        Column({
    space: 10 }) {
   
          SymbolGlyph(this.isStart ? $r('sys.symbol.pause') : $r('sys.symbol.play_fill'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text(this.isStart ? '暂停' : '开始')
        }
        .onClick(() => {
   
          if (this.isStart) {
   
            this.textTimerController.pause()
          } else {
   
            this.textTimerController.start()
          }
          this.isStart=!this.isStart
        })

        Column({
    space: 10 }) {
   
          SymbolGlyph($r('sys.symbol.arrow_counterclockwise'))
            .fontSize(30)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black])
          Text('重置')
        }
        .onClick(() => {
   
          this.textTimerController.reset()
        })
      }
    }
    .width('100%')
  }
}