harmony 鸿蒙TextClock

  • 2022-08-09
  • 浏览 (879)

TextClock

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

说明:

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

参数:

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

属性

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

名称 参数类型 描述
format string y:年(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日 EEEE 2023年2月4日 星期六
yyyy年M月d日 2023年2月4日
M月d日 EEEE 2月4日 星期六
M月d日 2月4日
MM/dd/yyyy 02/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/d 2023/2/4
yyyy-M-d 2023-2-4
yyyy.M.d 2023.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 aa 5:00:04 上午
HH 17

事件

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

名称 功能描述
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()

停止文本时钟。

示例

@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

你可能感兴趣的鸿蒙文章

harmony 鸿蒙基于ArkTS的声明式开发范式

harmony 鸿蒙@ohos.arkui.advanced.Counter(计数器组件)

harmony 鸿蒙@ohos.arkui.advanced.SegmentButton(分段按钮)

harmony 鸿蒙@ohos.multimedia.avCastPicker (投播组件)

harmony 鸿蒙属性动画

harmony 鸿蒙枚举说明

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

0  赞