【鸿蒙软件开发】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%')
  }
}

总结

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

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

相关推荐
百锦再1 小时前
Android Studio开发 SharedPreferences 详解
android·ide·android studio
青春给了狗1 小时前
Android 14 修改侧滑手势动画效果
android
CYRUS STUDIO1 小时前
Android APP 热修复原理
android·app·frida·hotfix·热修复
火柴就是我2 小时前
首次使用Android Studio时,http proxy,gradle问题解决
android
limingade2 小时前
手机打电话时电脑坐席同时收听对方说话并插入IVR预录声音片段
android·智能手机·电脑·蓝牙电话·电脑打电话
浩浩测试一下3 小时前
计算机网络中的DHCP是什么呀? 详情解答
android·网络·计算机网络·安全·web安全·网络安全·安全架构
青春给了狗4 小时前
Android 14 系统统一修改app启动时图标大小和圆角
android
高心星4 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会5 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会5 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos