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

相关推荐
北海-cherish3 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
悟能不能悟3 小时前
redis的红锁
数据库·redis·缓存
@小博的博客4 小时前
【Linux探索学习】第二篇Linux的基本指令(2)——开启Linux学习第二篇
linux·运维·学习
2501_915909064 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist5 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
安当加密5 小时前
MySQL数据库透明加密(TDE)解决方案:基于国密SM4的合规与性能优化实践
数据库·mysql·性能优化
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含6 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js