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

相关推荐
訾博ZiBo14 分钟前
【Vibe Coding】001-前端界面常用布局
前端
IT_陈寒16 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
曦樂~17 分钟前
【Qt】信号与槽(Signal and Slot)- 简易计算器
开发语言·数据库·qt
tianyuanwo18 分钟前
tar打包过滤指定目录指南
linux·tar·过滤式打包
DARLING Zero two♡21 分钟前
【Linux操作系统】简学深悟启示录:进程间通信
linux·运维·服务器
半梦半醒*22 分钟前
gitlab部署
linux·运维·centos·ssh·gitlab·jenkins
歪歪10026 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手28 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ35 分钟前
python面向对象
前端·数据库·python
长空任鸟飞_阿康40 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能