1# TextClock 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyujie43--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。 10 11组件不可见时，时间变动将停止。组件的可见状态基于[onVisibleAreaChange](./ts-universal-component-visible-area-change-event.md#onvisibleareachange)处理，可见阈值ratios大于0即视为可见状态。 12 13>**说明：** 14> 15>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 16> 17 18## 子组件 19 20无 21 22## 接口 23 24TextClock(options?: TextClockOptions) 25 26**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| -------- | -------- | -------- | -------- | 36| options | [TextClockOptions](#textclockoptions18对象说明)| 否 | 通过文本显示当前系统时间的组件参数。 | 37 38## TextClockOptions<sup>18+</sup>对象说明 39 40用于构建TextClock组件的选项。 41 42> **说明：** 43> 44> 为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。 45 46**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 47 48**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52| 名称 | 类型 | 只读 | 可选 | 说明 | 53| -------------- | -------- | ------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- | 54| timeZoneOffset<sup>8+</sup> | number | 否 | 是 | 设置时区偏移量。<br>取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。设置值为该取值范围内的浮点数时会进行取整，舍弃小数部分。<br>对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。<br/>默认值：当前系统的时区偏移量 <br/>设置值为{ 9.5, 3.5, -3.5, -4.5, -5.5, -5.75, -6.5, -9.5, -10.5, -12.75 }集合中的浮点数时不进行取整。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。| 55| controller<sup>8+</sup> | [TextClockController](#textclockcontroller) | 否 | 是 | 绑定一个控制器，用来控制文本时钟的状态。<br/>**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。| 56 57## 属性 58 59除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 60 61### format 62 63format(value: ResourceStr) 64 65设置显示时间格式，如“yyyy/MM/dd”、“yyyy-MM-dd”。 66 67y：年（yyyy表示完整年份，yy表示年份后两位）<br />M：月（若想使用01月则使用MM）<br />d：日（若想使用01日则使用dd）<br />E：星期（若想使用星期六则使用EEEE，若想使用周六则使用E、EE、EEE）<br />H：小时（24小时制） h：小时（12小时制） <br/>m：分钟<br/>s：秒<br/>SS：厘秒（format中S个数<3，全部按厘秒处理）<br />SSS：毫秒（format中S个数>=3，全部按毫秒处理）<br/>a：上午/下午（当设置小时制式为H时，该参数不生效） 68 69日期间隔符："年月日"、“/”、"-"、"."（可以自定义间隔符样式，字母不可以作为间隔符，汉字可以作为间隔符处理） 70 71允许自行拼接组合显示格式，即：年、月、日、星期、时、分、秒、毫秒可拆分为子元素，可自行排布组合。时间更新频率最高为一秒一次，不建议单独设置厘秒和毫秒格式。 72 73当设置无效字母时（非上述字母被认为是无效字母），该字母会被忽略。如果format全是无效字母时，显示格式跟随系统语言和系统小时制。例如系统语言为中文时，12小时制显示格式为yyyy/MM/dd aa hh:mm:ss.SSS，24小时制显示格式为yyyy/MM/dd HH:mm:ss.SSS。 74 75若format为空字符串（""）或者undefined，则使用默认值。 76 77非卡片中默认值：12小时制：aa hh:mm:ss，24小时制：HH:mm:ss。<br />卡片中默认值：12小时制：hh:mm，24小时制：HH:mm 。<br />卡片中使用时，最小时间单位为分钟。如果设置格式中有秒或厘秒按默认值处理。 78 79**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 80 81**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88| ------ | ------ | ---- | -------------- | 89| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 显示时间格式。 <br>从API version 20开始，支持Resource类型。| 90 91以下是format输入的格式样式及对应的显示效果： 92 93| 输入格式 | 显示效果 | 94| ----------------------- | ------------------- | 95| yyyy年M月d日 EEEE | 2023年2月4日 星期六 | 96| yyyy年M月d日 | 2023年2月4日 | 97| M月d日 EEEE | 2月4日 星期六 | 98| M月d日 | 2月4日 | 99| MM/dd/yyyy | 02/04/2023 | 100| EEEE MM月dd日 | 星期六 02月04日 | 101| yyyy（完整年份） | 2023年 | 102| yy（年份后两位） | 23年 | 103| MM（完整月份） | 02月 | 104| M（月份） | 2月 | 105| dd（完整日期） | 04日 | 106| d（日期） | 4日 | 107| EEEE（完整星期） | 星期六 | 108| E、EE、EEE（简写星期） | 周六 | 109| yyyy年M月d日 | 2023年2月4日 | 110| yyyy/M/d | 2023/2/4 | 111| yyyy-M-d | 2023-2-4 | 112| yyyy.M.d | 2023.2.4 | 113| HH:mm:ss（时:分:秒） | 17:00:04 | 114| aa hh:mm:ss（时:分:秒） | 上午 5:00:04 | 115| hh:mm:ss（时:分:秒） | 5:00:04 | 116| HH:mm（时:分） | 17:00 | 117| aa hh:mm（时:分） | 上午 5:00 | 118| hh:mm（时:分） | 5:00 | 119| mm:ss（分:秒） | 00:04 | 120| mm:ss.SS（分:秒.厘秒） | 00:04.91 | 121| mm:ss.SSS（分:秒.毫秒） | 00:04.536 | 122| hh:mm:ss aa | 5:00:04 上午 | 123| HH | 17 | 124 125### fontColor 126 127fontColor(value: ResourceColor) 128 129设置字体颜色。 130 131**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 132 133**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137**参数：** 138 139| 参数名 | 类型 | 必填 | 说明 | 140| ------ | ------------------------------------------ | ---- | ---------- | 141| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 字体颜色。 | 142 143### fontSize 144 145fontSize(value: Length) 146 147设置字体大小。 148 149**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 150 151**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 152 153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 154 155**参数：** 156 157| 参数名 | 类型 | 必填 | 说明 | 158| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 159| value | [Length](ts-types.md#length) | 是 | 字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串。 | 160 161### fontStyle 162 163fontStyle(value: FontStyle) 164 165设置字体样式。 166 167**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 168 169**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176| ------ | ------------------------------------------- | ---- | --------------------------------------- | 177| value | [FontStyle](ts-appendix-enums.md#fontstyle) | 是 | 字体样式。<br/>默认值：FontStyle.Normal | 178 179### fontWeight 180 181fontWeight(value: number | FontWeight | string) 182 183设置文本的字体粗细，设置过大可能会导致不同字体下的文字出现截断。 184 185**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 186 187**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**参数：** 192 193| 参数名 | 类型 | 必填 | 说明 | 194| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 195| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 是 | 文本的字体粗细，number类型取值范围为[100, 900]，取值间隔为100，取值越大，字体越粗。number类型取值范围外的默认值为400。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal | 196 197### fontFamily 198 199fontFamily(value: ResourceStr) 200 201设置字体列表。 202 203**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 204 205**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**参数：** 210 211| 参数名 | 类型 | 必填 | 说明 | 212| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 213| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 字体列表。默认字体'HarmonyOS Sans'。<br>应用当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。<br>卡片当前仅支持'HarmonyOS Sans'字体。 | 214 215### textShadow<sup>11+</sup> 216 217textShadow(value: ShadowOptions | Array<ShadowOptions>) 218 219设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。不支持fill字段, 不支持智能取色模式。 220 221**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 222 223**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**参数：** 228 229| 参数名 | 类型 | 必填 | 说明 | 230| ------ | ------------------------------------------------------------ | ---- | -------------- | 231| value | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| Array<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)> | 是 | 文字阴影效果。 | 232 233### fontFeature<sup>11+</sup> 234 235fontFeature(value: string) 236 237设置文字特性效果，比如数字等宽的特性。 238 239格式为：normal \| \<feature-tag-value\> 240 241\<feature-tag-value\>的格式为：\<string\> \[ \<integer\> \| on \| off ] 242 243\<feature-tag-value\>的个数可以有多个，中间用','隔开。 244 245例如，使用等宽时钟数字的输入格式为："ss01" on。 246 247**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 248 249**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253**参数：** 254 255| 参数名 | 类型 | 必填 | 说明 | 256| ------ | ------ | ---- | -------------- | 257| value | string | 是 | 文字特性效果。 | 258 259### contentModifier<sup>12+</sup> 260 261contentModifier(modifier: ContentModifier\<TextClockConfiguration>) 262 263定制TextClock内容区的方法。 264 265**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 266 267**系统能力：** SystemCapability.ArkUI.ArkUI.Full 268 269**参数：** 270 271| 参数名 | 类型 | 必填 | 说明 | 272| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 273| modifier | [ContentModifier\<TextClockConfiguration>](#textclockconfiguration12对象说明) | 是 | 在TextClock组件上，定制内容区的方法。<br/>modifier： 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 274 275### dateTimeOptions<sup>12+</sup> 276 277dateTimeOptions(dateTimeOptions: Optional\<DateTimeOptions>) 278 279设置小时是否显示前导0。 280 281**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 282 283**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 284 285**系统能力：** SystemCapability.ArkUI.ArkUI.Full 286 287**参数：** 288 289| 参数名 | 类型 | 必填 | 说明 | 290| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 291| dateTimeOptions | Optional<[DateTimeOptions](../../apis-localization-kit/js-apis-intl.md#datetimeoptionsdeprecated)> | 是 | 设置小时是否显示前导0，只支持设置hour参数，参数值为{hour: "2-digit"}时表示显示前导0，参数值为{hour: "numeric"}时表示不显示前导0。<br/>默认值：undefined，由组件根据应用设置格式自行判断是否显示前导0。| 292 293## 事件 294 295除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 296 297### onDateChange 298 299onDateChange(event: (value: number) => void) 300 301提供时间变化回调，该事件回调间隔为秒。 302 303组件不可见时不回调。 304 305非卡片中使用时，该事件回调间隔为秒。 306 307卡片中使用时，该事件回调间隔为分钟。 308 309**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 310 311**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 312 313**系统能力：** SystemCapability.ArkUI.ArkUI.Full 314 315**参数：** 316 317| 参数名 | 类型 | 必填 | 说明 | 318| ------ | ------ | ---- | ------------------------------------------------------ | 319| value | number | 是 | Unix Time Stamp，即自1970年1月1日（UTC）起经过的秒数。 | 320 321## TextClockController 322 323TextClock容器组件的控制器，可以将该控制器绑定到TextClock组件，通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。 324 325**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 326 327**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 328 329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 330 331### 导入对象 332 333```ts 334controller: TextClockController = new TextClockController(); 335``` 336 337### constructor 338 339constructor() 340 341TextClockController的构造函数。 342 343**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 344 345**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349### start 350 351start() 352 353启动文本时钟。 354 355**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 356 357**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 358 359**系统能力：** SystemCapability.ArkUI.ArkUI.Full 360 361### stop 362 363stop() 364 365停止文本时钟。 366 367**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 368 369**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 370 371**系统能力：** SystemCapability.ArkUI.ArkUI.Full 372 373## TextClockConfiguration<sup>12+</sup>对象说明 374 375开发者需要自定义class实现ContentModifier接口。 376 377**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 378 379**系统能力：** SystemCapability.ArkUI.ArkUI.Full 380 381| 名称 | 类型 | 必填 | 说明 | 382| ------ | ------ | ------ |-------------------------------- | 383| timeZoneOffset | number | 是 | 当前文本时钟时区偏移量。<br>取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。设置值为该取值范围内的浮点数时会进行取整，舍弃小数部分。 | 384| started | boolean | 是 | 指示文本时钟是否启动。<br>默认值：true，true表示启动文本时钟，false表示关闭文本时钟。 | 385| timeValue | number | 是 | 当前文本时钟时区的UTC秒数。 | 386 387## 示例 388### 示例1（支持启停的文本样式时钟） 389 390该示例展示了TextClock组件的基本使用方法，通过[format](#format)属性设置时钟文本的格式。 391 392点击"start TextClock"按钮，按钮回调函数会调用TextClockController启动文本时钟。点击"stop TextClock"按钮，会调用TextClockController暂停文本时钟。 393 394示例中的组件通过设置[TextClockController](#textclockcontroller)回调函数，在文本时钟更新时，持续修改accumulateTime的内容。 395 396```ts 397@Entry 398@Component 399struct Second { 400 @State accumulateTime: number = 0; 401 // 导入对象 402 controller: TextClockController = new TextClockController(); 403 404 build() { 405 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 406 Text('Current milliseconds is ' + this.accumulateTime) 407 .fontSize(20) 408 // 以12小时制显示东八区的系统时间，精确到秒。 409 TextClock({ timeZoneOffset: -8, controller: this.controller }) 410 .format('aa hh:mm:ss') 411 .onDateChange((value: number) => { 412 this.accumulateTime = value; 413 }) 414 .margin(20) 415 .fontSize(30) 416 Button("start TextClock") 417 .margin({ bottom: 10 }) 418 .onClick(() => { 419 // 启动文本时钟 420 this.controller.start(); 421 }) 422 Button("stop TextClock") 423 .onClick(() => { 424 // 停止文本时钟 425 this.controller.stop(); 426 }) 427 } 428 .width('100%') 429 .height('100%') 430 } 431} 432``` 433 434 435### 示例2（设定文本阴影样式） 436 437该示例通过[textShadow](#textshadow11)属性设置文本时钟的文本阴影样式。 438 439``` ts 440@Entry 441@Component 442struct TextClockExample { 443 @State textShadows: ShadowOptions | Array<ShadowOptions> = [{ 444 radius: 10, 445 color: Color.Red, 446 offsetX: 10, 447 offsetY: 0 448 }, { 449 radius: 10, 450 color: Color.Black, 451 offsetX: 20, 452 offsetY: 0 453 }, { 454 radius: 10, 455 color: Color.Brown, 456 offsetX: 30, 457 offsetY: 0 458 }, { 459 radius: 10, 460 color: Color.Green, 461 offsetX: 40, 462 offsetY: 0 463 }, { 464 radius: 10, 465 color: Color.Yellow, 466 offsetX: 100, 467 offsetY: 0 468 }]; 469 470 build() { 471 Column({ space: 8 }) { 472 TextClock().fontSize(50).textShadow(this.textShadows) 473 } 474 } 475} 476``` 477 478 479### 示例3（设定自定义内容区） 480该示例实现了自定义文本时钟样式的功能，自定义样式实现了一个时间选择器组件：通过文本时钟的时区偏移量与UTC秒数，来动态改变时间选择器的选中值，实现时钟效果。同时，根据文本时钟的启动状态，实现文本选择器的12小时制与24小时制的切换。 481 482``` ts 483class MyTextClockStyle implements ContentModifier<TextClockConfiguration> { 484 currentTimeZoneOffset: number = new Date().getTimezoneOffset() / 60; 485 title: string = ''; 486 487 constructor(title: string) { 488 this.title = title; 489 } 490 491 applyContent(): WrappedBuilder<[TextClockConfiguration]> { 492 return wrapBuilder(buildTextClock); 493 } 494} 495 496@Builder 497function buildTextClock(config: TextClockConfiguration) { 498 Row() { 499 Column() { 500 Text((config.contentModifier as MyTextClockStyle).title) 501 .fontSize(20) 502 .margin(20) 503 TimePicker({ 504 selected: (new Date(config.timeValue * 1000 + 505 ((config.contentModifier as MyTextClockStyle).currentTimeZoneOffset - config.timeZoneOffset) * 60 * 60 * 506 1000)), 507 format: TimePickerFormat.HOUR_MINUTE_SECOND 508 }) 509 .useMilitaryTime(!config.started) 510 } 511 } 512} 513 514@Entry 515@Component 516struct TextClockExample { 517 @State accumulateTime1: number = 0; 518 @State timeZoneOffset: number = -8; 519 controller1: TextClockController = new TextClockController(); 520 controller2: TextClockController = new TextClockController(); 521 522 build() { 523 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 524 Text('Current milliseconds is ' + this.accumulateTime1) 525 .fontSize(20) 526 .margin({ top: 20 }) 527 TextClock({ timeZoneOffset: this.timeZoneOffset, controller: this.controller1 }) 528 .format('aa hh:mm:ss') 529 .onDateChange((value: number) => { 530 this.accumulateTime1 = value; 531 }) 532 .margin(20) 533 .fontSize(30) 534 TextClock({ timeZoneOffset: this.timeZoneOffset, controller: this.controller2 }) 535 .format('aa hh:mm:ss') 536 .fontSize(30) 537 .contentModifier(new MyTextClockStyle('ContentModifier:')) 538 Button("start TextClock") 539 .margin({ top: 20, bottom: 10 }) 540 .onClick(() => { 541 // 启动文本时钟 542 this.controller1.start(); 543 this.controller2.start(); 544 }) 545 Button("stop TextClock") 546 .margin({ bottom: 30 }) 547 .onClick(() => { 548 // 停止文本时钟 549 this.controller1.stop(); 550 this.controller2.stop(); 551 }) 552 553 } 554 .width('100%') 555 .height('100%') 556 } 557} 558``` 559 560 561### 示例4（设置前导零） 562该示例演示了[dateTimeOptions](#datetimeoptions12)属性为小时字段增加或去除前导0的功能。24小时制的小时字段默认带有前导0，可通过[dateTimeOptions](#datetimeoptions12)属性去除前导0，12小时制的小时字段默认不带有前导0，可通过[dateTimeOptions](#datetimeoptions12)属性增加前导0。 563``` ts 564@Entry 565@Component 566struct TextClockExample { 567 build() { 568 Column({ space: 8 }) { 569 Row() { 570 Text("24小时制去除前导0：") 571 .fontSize(20) 572 TextClock() 573 .fontSize(20) 574 .format("HH:mm:ss") 575 .dateTimeOptions({ hour: "numeric" }) 576 } 577 578 Row() { 579 Text("12小时制增加前导0：") 580 .fontSize(20) 581 TextClock() 582 .fontSize(20) 583 .format("aa hh:mm:ss") 584 .dateTimeOptions({ hour: "2-digit" }) 585 } 586 } 587 .alignItems(HorizontalAlign.Start) 588 } 589} 590``` 591
