0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式组件:TextTimer

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-07-03 17:06 次阅读

TextTimer

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

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

参数

参数名参数类型必填参数描述
isCountDownboolean是否倒计时。默认值:false
countnumber倒计时时间(isCountDown为true时生效),单位为毫秒。最长不超过86400000毫秒(24小时)。 0默认值:60000
controller[TextTimerController]TextTimer控制器

属性

名称参数类型描述
formatstring自定义格式,需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式,则使用默认值。默认值:'HH:mm:ss.SS'

事件

名称功能描述
onTimer(event: (utc: number, elapsedTime: number) => void)时间文本发生变化时触发。utc:Linux时间戳,即自1970年1月1日起经过的时间,单位为设置格式的最小单位。elapsedTime:计时器经过的时间,单位为设置格式的最小单位。**说明:**锁屏状态和应用后台状态下不会触发该事件。HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151450.png

TextTimerController

TextTimer组件的控制器,用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。

导入对象

textTimerController: TextTimerController = new TextTimerController()

start

start()

计时开始。

pause

pause()

计时暂停。

reset

reset()

重置计时器。

示例

// xxx.ets
@Entry
@Component
struct TextTimerExample {
  textTimerController: TextTimerController = new TextTimerController()
  @State format: string = 'mm:ss.SS'

  build() {
    Column() {
      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
        .format(this.format)
        .fontColor(Color.Black)
        .fontSize(50)
        .onTimer((utc: number, elapsedTime: number) = > {
          console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row() {
        Button("start").onClick(() = > {
          this.textTimerController.start()
        })
        Button("pause").onClick(() = > {
          this.textTimerController.pause()
        })
        Button("reset").onClick(() = > {
          this.textTimerController.reset()
        })
      }
    }
  }
}

image.png

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    512

    浏览量

    17813
  • 鸿蒙
    +关注

    关注

    57

    文章

    2339

    浏览量

    42805
收藏 人收藏

    评论

    相关推荐

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    轨迹。状态与数据管理状态数据管理作为基于ArkTS声明开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
    发表于 01-17 15:09

    HarmonyOS/OpenHarmony应用开发-声明开发范式组件汇总

    组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。声明
    发表于 01-19 11:14

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 548次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS声明组件:DataPanel

    数据面板组件,用于将多个数据占比情况使用占比图进行展示。
    的头像 发表于 06-21 09:42 402次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:DataPanel

    鸿蒙ArkTS声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 418次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Marquee

    鸿蒙ArkTS声明组件:NavDestination

    作为NavRouter组件的子组件,用于显示导航内容区。
    的头像 发表于 06-27 14:05 487次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:NavDestination

    鸿蒙ArkTS声明组件:PatternLock

    图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
    的头像 发表于 06-27 09:59 455次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:PatternLock

    鸿蒙ArkTS声明组件:【RichText】

    富文本组件,解析并显示HTML格式文本。
    的头像 发表于 06-29 09:35 711次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:【RichText】

    鸿蒙ArkTS声明组件:ScrollBar

    滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
    的头像 发表于 07-01 15:52 516次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:ScrollBar

    鸿蒙ArkTS声明组件:Span

    作为Text组件的子组件,用于显示行内文本的组件
    的头像 发表于 07-01 09:14 454次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Span

    鸿蒙ArkTS声明组件:StepperItem

    用作[Stepper]组件的页面子组件
    的头像 发表于 07-02 17:47 405次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:StepperItem

    鸿蒙ArkTS声明组件:TextArea

    多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
    的头像 发表于 07-02 15:02 665次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextArea

    鸿蒙ArkTS声明组件:TextInput

    单行文本输入框组件
    的头像 发表于 07-03 09:14 946次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextInput

    鸿蒙ArkTS声明组件:TextPicker

    滑动选择文本内容的组件
    的头像 发表于 07-03 15:07 467次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextPicker

    鸿蒙ArkTS声明组件:XComponent

    可用于EGL/OpenGLES和媒体数据写入,并显示在XComponent组件
    的头像 发表于 07-05 09:56 675次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:XComponent