计时器状态的组件

2024-01-22 17:31 更新

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

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })

参数:

参数名参数类型必填参数描述
isCountDownboolean

是否倒计时。

默认值:false

countnumber

倒计时时间(isCountDown为true时生效),单位为毫秒。最长不超过86400000毫秒(24小时)。 0<count<86400000时,count值为倒计时初始值。否则,使用默认值为倒计时初始值。

默认值:60000

controllerTextTimerControllerTextTimer控制器。

属性

名称参数类型描述
formatstring

自定义格式,需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式,则使用默认值。

默认值:'HH:mm:ss.SS'

事件

名称功能描述
onTimer(event: (utc: number, elapsedTime: number) => void)

时间文本发生变化时触发。

utc:Linux时间戳,即自1970年1月1日起经过的毫秒数。

elapsedTime:计时器经过的时间,单位为毫秒。

TextTimerController

TextTimer组件的控制器,用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。

导入对象

  1. textTimerController: TextTimerController = new TextTimerController()

start

start()

计时开始。

pause

pause()

计时暂停。

reset

reset()

重置计时器。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextTimerExample {
  5. textTimerController: TextTimerController = new TextTimerController()
  6. @State format: string = 'mm:ss.SS'
  7. build() {
  8. Column() {
  9. TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
  10. .format(this.format)
  11. .fontColor(Color.Black)
  12. .fontSize(50)
  13. .onTimer((utc: number, elapsedTime: number) => {
  14. console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
  15. })
  16. Row() {
  17. Button("start").onClick(() => {
  18. this.textTimerController.start()
  19. })
  20. Button("pause").onClick(() => {
  21. this.textTimerController.pause()
  22. })
  23. Button("reset").onClick(() => {
  24. this.textTimerController.reset()
  25. })
  26. }
  27. }
  28. }
  29. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号