前言

通過文本顯示計時信息并控制其計時器狀態(tài)的組件。
時間選擇組件，根據(jù)指定參數(shù)創(chuàng)建選擇器，支持選擇小時及分鐘。文章來源地址http://www.zghlxwxcb.cn/news/detail-727979.html

一、TextTimer

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

說明
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則會更新新版博客。

1.1 子組件

無

1.2 接口

使用下面這個接口創(chuàng)建即可

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

參數(shù)

isCountDown
參數(shù)名: isCountDown
參數(shù)類型: boolean
參數(shù)描述: 是否倒計時。默認值為false。
是否必填：否

count
參數(shù)名: count
參數(shù)類型: number
參數(shù)描述: 倒計時時間（isCountDown為true時生效），單位為毫秒。最長不超過86400000毫秒（24小時）。當0 < count < 86400000時，count值為倒計時初始值。否則，使用默認值作為倒計時初始值。
默認值: 60000
是否必填：否

controller
參數(shù)名: controller
參數(shù)類型: TextTimerController
參數(shù)描述: TextTimer控制器。
是否必填：否

TextTimerController

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

導入對象

textTimerController: TextTimerController = new TextTimerController()

使用下面這個函數(shù)即可打開計時器：

start()

使用下面這個函數(shù)即可暫停計時器：

pause()

使用下面這個函數(shù)即可重置計時器：

reset()

1.3 屬性

屬性名稱：format 屬性類型：string
自定義格式，需至少包含一個HH、mm、ss、SS中的關鍵字。如使用yy、MM、dd等日期格式，則使用默認值。
默認值：‘HH:mm:ss.SS’

1.4 事件

onTimer(event: (utc: number, elapsedTime: number) => void)	

時間文本發(fā)生變化時觸發(fā)。
utc：Linux時間戳，即自1970年1月1日起經(jīng)過的毫秒數(shù)。
elapsedTime：計時器經(jīng)過的時間，單位為毫秒。

1.5 示例代碼

// 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()
        })
      }
    }
  }
}

二、TimePicker

時間選擇組件，根據(jù)指定參數(shù)創(chuàng)建選擇器，支持選擇小時及分鐘。

說明
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則會更新新版博客。

2.1 子組件

無

2.2 接口

TimePicker(options?: {selected?: Date})

默認以24小時的時間區(qū)間創(chuàng)建滑動選擇器。

參數(shù)

參數(shù)名稱：selected
參數(shù)類型：Date
是否必填：否
參數(shù)描述：設置選中項的時間。
默認值：當前系統(tǒng)時間

2.3 屬性

除支持通用屬性外，還支持以下屬性：
屬性名稱：useMilitaryTime
屬性類型：boolean
屬性描述：展示時間是否為24小時制，不支持動態(tài)修改。
默認值：false

2.4 事件

除支持通用事件外，還支持以下事件：

onChange(callback: (value: TimePickerResult ) => void)

選擇時間時觸發(fā)該事件。

TimePickerResult對象說明

TimePickerResult為24小時制時間。

參數(shù)名稱：hour
參數(shù)類型：number
參數(shù)描述：選中時間的時。
取值范圍：[0-23]

參數(shù)名稱：minute
參數(shù)類型：number
參數(shù)描述：選中時間的分。
取值范圍：[0-59]

2.5 示例代碼

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  @State isMilitaryTime: boolean = false
  private selectedTime: Date = new Date('2022-07-22T08:00:00')

  build() {
    Column() {
      Button('切換12小時制/24小時制')
        .margin({ top: 30, bottom: 30 })
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime
        })
      TimePicker({
        selected: this.selectedTime,
      })
        .useMilitaryTime(this.isMilitaryTime)
        .onChange((value: TimePickerResult) => {
          this.selectedTime.setHours(value.hour, value.minute)
          console.info('select current date is: ' + JSON.stringify(value))
        })
    }.width('100%')
  }
}

總結

通過文本顯示計時信息并控制其計時器狀態(tài)的組件。
時間選擇組件，根據(jù)指定參數(shù)創(chuàng)建選擇器，支持選擇小時及分鐘。

到了這里，關于【鴻蒙軟件開發(fā)】ArkTS基礎組件之TextTimer(文本顯示計時)、TimePicker(時間選擇)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！