TextTimer

The <TextTimer> component displays timing information and is controlled in text format.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

TextTimer(options?: TextTimerOptions)

Parameters

Name	Type	Mandatory	Description
options	TextTimerOptions	No	Parameters of the <TextTimer> component.

TextTimerOptions

Name	Type	Mandatory	Description
isCountDown	boolean	No	Whether to count down. Default value: false
count	number	No	Countdown time, in milliseconds. This parameter is valid only when isCountDown is set to true. The maximum value is 86400000 ms (24 hours). In the case of 0 < Value of count < 86400000, the value of count is used as the initial countdown value. In other cases, the default value is used as the initial countdown value. Default value: 60000
controller	TextTimerController	No	<TextTimer> controller.

Attributes

Among the universal attributes and universal text attributes, fontColor, fontSize, fontStyle, fontWeight, and fontFamily are supported. In addition, the following attributes are supported.

Name	Type	Description
format	string	Custom format. The value must contain at least one of the following keywords: HH, mm, ss, and SS. If the specified date format is yy, MM, or dd, the default value is used instead. Default value: 'HH:mm:ss.SS'

Events

Name	Description
onTimer(event: (utc: number, elapsedTime: number) => void)	Triggered when the time text changes. utc: Linux timestamp, which is the amount of time that has elapsed since January 1, 1970, in the minimum unit of the format. elapsedTime: elapsed time of the timer, in the minimum unit of the format. NOTE This event is not triggered when the screen is locked or the application is running in the background.

TextTimerController

Implements the controller for controlling the <TextTimer> component. A <TextTimer> component can be bound to only one controller.

Objects to Import

textTimerController: TextTimerController = new TextTimerController()

start

start()

Starts the timer.

pause

pause()

Pauses the timer.

reset

reset()

Resets the timer.

Example

// xxx.ets
@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      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() {
        Button("start").onClick(() => {
          this.textTimerController.start()
        })
        Button("pause").onClick(() => {
          this.textTimerController.pause()
        })
        Button("reset").onClick(() => {
          this.textTimerController.reset()
        })
      }
    }
  }
}

en-us_image_0000001257138345