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

2024-01-08 20:47:24

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

文章来源:https://blog.csdn.net/yyxhzdm/article/details/135464347
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。