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

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

3天内不再提示

鸿蒙ArkTS声明式组件:TextClock

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

TextClock

TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。

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

子组件

接口

TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController })

参数

参数名参数类型必填参数描述
timeZoneOffsetnumber设置时区偏移量。 取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8。 对横跨国际日界线的国家或地区,用-13(UTC+13)和-14(UTC+14)来保证整个国家或者区域处在相同的时间,当设置的值不在取值范围内时,将使用当前系统的时区偏移量。 默认值:当前系统的时区偏移量
controller[TextClockController]绑定一个控制器,用来控制文本时钟的状态。

属性

除支持[通用属性]外,还支持以下属性:

名称参数类型描述
formatstringy:年(yyyy表示完整年份,yy表示年份后两位) M:月(若想使用01月则使用MM) d:日(若想使用01日则使用dd) E:星期(若想使用星期六则使用EEEE,若想使用周六则使用E、EE、EEE) H:小时(24小时制) h:小时(12小时制) m:分钟 s:秒 SS:厘秒(format中S个数<3,全部按厘秒处理) SSS:毫秒(format中S个数>=3,全部按毫秒处理 a:上午/下午(当设置小时制式为H时,该参数不生效) 日期间隔符:"年月日"、“/”、"-"、"."(可以自定义间隔符样式,间隔符不可以为字母,汉字则作为间隔符处理) 允许自行拼接组合显示格式,即:年、月、日、星期、时、分、秒、毫秒可拆分为子元素,可自行排布组合。 当设置无效字母时(非上述字母被认为是无效字母,多个有效字母会识别其中的有效组合进行匹配,例:yyyyy会匹配其中的yyyy为有效组合,多余的y认为是无效字母),该字母会被忽略。如果format全是无效字母时,显示为格式yyyy/MM/dd aa hh:mm:ss.SS 若format为空或者undefined,则使用默认值。 默认值:aa hh:mm:ss

以下是format输入的格式样式及对应的显示效果:

输入格式显示效果
yyyy年M月d日 EEEE2023年2月4日 星期六
yyyy年M月d日2023年2月4日
M月d日 EEEE2月4日 星期六
M月d日2月4日
MM/dd/yyyy02/04/2023
EEEE MM月dd日星期六 02月04日
yyyy(完整年份)2023年
yy(年份后两位)23年
MM(完整月份)02月
M(月份)2月
dd(完整日期)04日
d(日期)4日
EEEE(完整星期)星期六
E、EE、EEE(简写星期)周六
yyyy年M月d日2023年2月4日
yyyy/M/d2023/2/4
yyyy-M-d2023-2-4
yyyy.M.d2023.2.4
HH:mm:ss(时:分:秒)17:00:04
aa hh:mm:ss(时:分:秒)上午 5:00:04
hh:mm:ss(时:分:秒)5:00:04
HH:mm(时:分)17:00
aa hh:mm(时:分)上午 5:00
hh:mm(时:分)5:00
mm:ss(分:秒)00:04
mm:ss.SS(分:秒.厘秒)00:04.91
mm:ss.SSS(分:秒.毫秒)00:04.536
hh:mm:ss aa5:00:04 上午
HH17

事件

除支持[通用事件]外,还支持以下事件:

名称功能描述
onDateChange(event: (value: number) => void)提供时间变化回调,该事件回调间隔为秒。 - value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的秒数。

TextClockController

TextClock容器组件的控制器,可以将该控制器绑定到TextClock组件,通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。

导入对象

controller: TextClockController = new TextClockController();

start

start()

启动文本时钟。

stop

stop()

停止文本时钟。HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

鸿蒙文档.png

示例

@Entry
@Component
struct Second {
  @State accumulateTime: number = 0
  // 导入对象
  controller: TextClockController = new TextClockController()
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Current milliseconds is ' + this.accumulateTime)
        .fontSize(20)
      // 以12小时制显示东八区的系统时间,精确到秒。
      TextClock({ timeZoneOffset: -8, controller: this.controller })
        .format('aa hh:mm:ss')
        .onDateChange((value: number) = > {
          this.accumulateTime = value
        })
        .margin(20)
        .fontSize(30)
      Button("start TextClock")
        .margin({ bottom: 10 })
        .onClick(() = > {
          // 启动文本时钟
          this.controller.start()
        })
      Button("stop TextClock")
        .onClick(() = > {
          // 停止文本时钟
          this.controller.stop()
        })
    }
    .width('100%')
    .height('100%')
  }
}

text_clock

审核编辑 黄宇

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

    关注

    1

    文章

    513

    浏览量

    17846
  • 鸿蒙
    +关注

    关注

    57

    文章

    2364

    浏览量

    42893
收藏 人收藏

    评论

    相关推荐

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

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

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

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

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 567次阅读
    <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声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 443次阅读
    <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 500次阅读
    <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 477次阅读
    <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 759次阅读
    <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 541次阅读
    <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 477次阅读
    <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 420次阅读
    <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 720次阅读
    <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 1009次阅读
    <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 508次阅读
    <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声明组件:TextTimer

    通过文本显示计时信息并控制其计时器状态的组件
    的头像 发表于 07-03 17:06 549次阅读
    <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>:TextTimer

    鸿蒙ArkTS声明组件:XComponent

    可用于EGL/OpenGLES和媒体数据写入,并显示在XComponent组件
    的头像 发表于 07-05 09:56 724次阅读
    <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