第九节HarmonyOS 常用基础组件12-TextTimer

1、描述

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

2、接口

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

3、参数

参数名称	参数类型	必填	描述
isCountDown	boolean	否	是否倒计时。默认值：false
count	number	否	倒计时时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。即count取值在0~86400000数值之间。默认值：6000（6s）
controller	TextTimerController	否	TextTimer控制器

4、属性

format – string – 自定义格式，至少需要包含一个HH、mm、ss、SS中的关键字。默认值：‘HH:mm:ss.SS’

5、事件

onTimer（event: (utc: number, elapsedTime: number) => void）- 时间文本发生变化时触发。（utc：linux时间戳，即自1970年1月1起经过的毫秒数。 elapsedTime：计时器经过的时间，单位毫秒）

6、TextTimerController

TextTimer组件的控制器，拥挤控制文本计时器，一个TextTimer组件仅支持绑定一个控制器。

导入对象

controller: TextTimerController = new TextTimerController()

start() – 计时开始

pause() – 计时暂停

reset() – 重置计时器

7、实例

import router from '@ohos.router'@Entry
@Component
struct TextTimerPage {@State message: string = '通过文本显示计时信息并控制其计时器状态的组件。'@State onTimerContent: string = ''// TextTimer的控制器private controller: TextTimerController = new TextTimerController()build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width('96%')Blank(12)TextTimer({ isCountDown: true, count: 120000, controller: this.controller }).fontSize(20).fontColor(Color.Red).format('mm:ss').onTimer((utc: number, elapsedTime: number) => { // utc 时间戳， elapsedTime计时器经过的时间this.onTimerContent = 'textTimer 时间戳 utc is：' + utc + ', 计时器经过的时间 elapsedTime: ' + elapsedTime;})Blank(12)Row() {Button('计时器启动').width('30%').onClick(() => {this.controller.start();})Button('计时器暂停').width('30%').margin({ left: '2.5%', right: '2.5%' }).onClick(() => {this.controller.pause();})Button('计时器重置').width('30%').onClick(() => {this.controller.reset();})}.alignItems(VerticalAlign.Center)Blank(12)Text(this.onTimerContent).width('96%').fontSize(20).fontColor(Color.Red)Blank(12)Button("文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/textTimer/TextTimerDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

8、效果图