計時器狀態(tài)的組件

2024-01-22 17:31 更新

通過文本顯示計時信息并控制其計時器狀態(tài)的組件。

說明

該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

子組件

接口

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

參數(shù):

參數(shù)名參數(shù)類型必填參數(shù)描述
isCountDownboolean

是否倒計時。

默認(rèn)值:false

countnumber

倒計時時間(isCountDown為true時生效),單位為毫秒。最長不超過86400000毫秒(24小時)。 0<count<86400000時,count值為倒計時初始值。否則,使用默認(rèn)值為倒計時初始值。

默認(rèn)值:60000

controllerTextTimerControllerTextTimer控制器。

屬性

名稱參數(shù)類型描述
formatstring

自定義格式,需至少包含一個HH、mm、ss、SS中的關(guān)鍵字。如使用yy、MM、dd等日期格式,則使用默認(rèn)值。

默認(rèn)值:'HH:mm:ss.SS'

事件

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

時間文本發(fā)生變化時觸發(fā)。

utc:Linux時間戳,即自1970年1月1日起經(jīng)過的毫秒數(shù)。

elapsedTime:計時器經(jīng)過的時間,單位為毫秒。

TextTimerController

TextTimer組件的控制器,用于控制文本計時器。一個TextTimer組件僅支持綁定一個控制器。

導(dǎo)入對象

  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. }

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號