【鸿蒙软件开发】ArkTS基础组件之TextTimer(文本显示计时)、TimePicker(时间选择)

文章目录


前言

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

时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。


一、TextTimer

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

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则会更新新版博客。

1.1 子组件

1.2 接口

使用下面这个接口创建即可

javascript 复制代码
TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })

参数

isCountDown

参数名: isCountDown

参数类型: boolean

参数描述: 是否倒计时。默认值为false。

是否必填:否

count

参数名: count

参数类型: number

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

默认值: 60000

是否必填:否

controller

参数名: controller

参数类型: TextTimerController

参数描述: TextTimer控制器。

是否必填:否

TextTimerController

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

导入对象

javascript 复制代码
textTimerController: TextTimerController = new TextTimerController()

使用下面这个函数即可打开计时器:

javascript 复制代码
start()

使用下面这个函数即可暂停计时器:

javascript 复制代码
pause()

使用下面这个函数即可重置计时器:

javascript 复制代码
reset()

1.3 属性

属性名称:format 属性类型:string

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

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

1.4 事件

javascript 复制代码
onTimer(event: (utc: number, elapsedTime: number) => void)	

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

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

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

1.5 示例代码

javascript 复制代码
// 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

时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则会更新新版博客。

2.1 子组件

2.2 接口

javascript 复制代码
TimePicker(options?: {selected?: Date})

默认以24小时的时间区间创建滑动选择器。

参数

参数名称:selected

参数类型:Date

是否必填:否

参数描述:设置选中项的时间。

默认值:当前系统时间

2.3 属性

除支持通用属性外,还支持以下属性:

属性名称:useMilitaryTime

属性类型:boolean

属性描述:展示时间是否为24小时制,不支持动态修改。

默认值:false

2.4 事件

除支持通用事件外,还支持以下事件:

javascript 复制代码
onChange(callback: (value: TimePickerResult ) => void)

选择时间时触发该事件。

TimePickerResult对象说明

TimePickerResult为24小时制时间。

参数名称:hour

参数类型:number

参数描述:选中时间的时。

取值范围:[0-23]

参数名称:minute

参数类型:number

参数描述:选中时间的分。

取值范围:[0-59]

2.5 示例代码

javascript 复制代码
// 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%')
  }
}

总结

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

时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。

相关推荐
每次的天空4 小时前
Android学习总结之算法篇四(字符串)
android·学习·算法
x-cmd5 小时前
[250331] Paozhu 发布 1.9.0:C++ Web 框架,比肩脚本语言 | DeaDBeeF 播放器发布 1.10.0
android·linux·开发语言·c++·web·音乐播放器·脚本语言
tangweiguo030519878 小时前
Android BottomNavigationView 完全自定义指南:图标、文字颜色与选中状态
android
遥不可及zzz9 小时前
Android 应用程序包的 adb 命令
android·adb
别说我什么都不会10 小时前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
无知的前端10 小时前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
_一条咸鱼_10 小时前
Android Compose 入门之字符串与本地化深入剖析(五十三)
android
码是生活10 小时前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师10 小时前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
ModestCoder_11 小时前
将一个新的机器人模型导入最新版isaacLab进行训练(以unitree H1_2为例)
android·java·机器人