HarmonyOS NEXT Practical: Countdown

Goal: Implement countdown function

Knowledge points:
TextTimer is a component that displays timing information through text and controls its timer status.
When the component is not visible, time changes will stop, and the visible state of the component is processed based on onVisibleAreaChange. A visible threshold ratio greater than 0 is considered visible.

interface

TextTimer(options?: TextTimerOptions)

options： Component parameters that display timing information through text and control its timer status.

TextTimerOptions

• IsCountDown: Countdown or not. When the value is true, the timer starts counting down, for example, from 30 seconds to 0 seconds. When the value is false, the timer starts counting, for example from 0 seconds to 30 seconds. Default value: false
• Count: Timer time (effective when isCountDown is true), measured in milliseconds. The maximum duration shall not exceed 86400000 milliseconds (24 hours). When 0
• Controller: TextTimer controller.

TextTimerController
The controller of TextTimer component is used to control the text timer. A TextTimer component only supports binding to one controller, and the relevant instructions can only be called after the component is created.

TextTimerConfiguration

• Count: Timer time (effective when isCountDown is true), measured in milliseconds. The maximum duration shall not exceed 86400000 milliseconds (24 hours). When 0
• IsCountDown: Countdown or not. When the value is true, the timer starts counting down, for example, from 30 seconds to 0 seconds. When the value is false, the timer starts counting, for example from 0 seconds to 30 seconds. Default value: false
• Started: Has the timer started.
• ElapsedTime: The time elapsed by the timer, measured in the smallest formatted unit.

TextTimer property

• Format: Set a custom format that includes at least one keyword from HH, mm, ss, SS. If using date formats such as yy, MM, dd, etc., use the default values.
• TextShadow: Set the text shadow effect. This interface supports entering parameters in array form and implementing multiple text shadows. Do not support fill fields, do not support intelligent color extraction mode.
• ContentModifier: Method for customizing the TextTimer content area. On the TextTimer component, customize the content area method.

Actual combat: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%')
  }
}