第九节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、效果图