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

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

前言


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

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


一、TextTimer


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

说明

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


1.1 子组件


1.2 接口

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

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


04cb89603df742feb2227d895a29f75d.png


参数

isCountDown

参数名: isCountDown

参数类型: boolean

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

是否必填:否

count

参数名: count

参数类型: number

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

默认值: 60000

是否必填:否


controller

参数名: controller

参数类型: TextTimerController

参数描述: TextTimer控制器。

是否必填:否


TextTimerController

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


导入对象

textTimerController: TextTimerController = new TextTimerController()


681f5f83cc394a3eb2dd8873f29ab14f.png

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

start()


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

pause()


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

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)


a3d045b887914df984bbb9d65e0ca948.png

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

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

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


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


c14c7f9addd348148298e0c6ee43cee4.png

e76eba3bec824856afd6b2cb5dc43516.png


二、TimePicker


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

说明

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


2.1 子组件


2.2 接口

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


5fd49eb97d8748f0875ccdaeb7855e47.png

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


参数

参数名称:selected

参数类型:Date

是否必填:否

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

默认值:当前系统时间


2.3 属性

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

属性名称:useMilitaryTime

属性类型:boolean

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

默认值:false


2.4 事件

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

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


c20a5933420d421db6eb5196fab4584f.png

选择时间时触发该事件。


TimePickerResult对象说明

TimePickerResult为24小时制时间。

参数名称:hour

参数类型:number

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

取值范围:[0-23]

参数名称:minute

参数类型:number

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

取值范围:[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%')
  }
}


60ab08cf4ed942a7affe5ec758e0734c.png

6b0f7ba64b8c4aa6a375f0d3bdc0a08b.png


总结


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

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

相关文章
|
4天前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
19 3
|
4天前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
20 2
|
16天前
|
JSON 前端开发 网络架构
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
151 101
鸿蒙开发:一文探究Navigation路由组件
|
12天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
72 47
Harmony OS开发-ArkTS语言速成二
|
14天前
鸿蒙开发:组件样式的复用
如果要实现多页面之间的组件属性样式复用,建议使用AttributeModifier,如果是单页面,通用属性可以使用@Styles,组件自有属性可以使用@Extend。
鸿蒙开发:组件样式的复用
|
5天前
|
UED 开发者
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
27 8
|
4天前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
25 5
|
4天前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
20 1
|
14天前
|
前端开发 中间件 索引
鸿蒙开发:Navigation路由组件使用由繁入简
使用了插件和路由库之后,在每个Module下都会生成一个路由配置文件,以Module名字+RouterConfig为文件命名,此路由配置文件,也会在AbilityStage中,通过routerInitConfig方法进行自动配置。
|
13天前
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
19 1