HarmonyOS 6 TextClock 组件使用文档

文章目录完整示例核心功能模块解析1 基础默认用法2 format 自定义时间格式3 dateTimeOptions 数字格式化4 文字样式与阴影定制5 TextClockController 控制器6 onDateChange 时间回调7 fontFeature 高级字体特性核心对象与类型说明运行效果说明总结TextClock是鸿蒙基础文本时钟组件用于实时展示系统本地时间组件内部自动定时刷新无需手动定时器支持自定义时间格式、时区、文字样式、阴影、字体特性搭配TextClockController可实现时钟手动启动、停止控制满足首页时间、状态栏时钟、计时展示等业务需求。完整示例// xxx.ets Entry Component struct TextClockFullDemo { // 控制器控制时钟启停 private controller: TextClockController new TextClockController(); // 文字阴影配置 private shadowStyle: ShadowOptions { radius: 5, color: #33000000, offsetX: 2, offsetY: 2 }; build() { Column({ space: 15 }) { // 标题 Text(TextClock 完整功能演示) .fontSize(22) .fontWeight(FontWeight.Bold) .margin({ top: 10 }); // 1. 默认样式时钟 Text(1. 默认样式系统时间).fontSize(14).fontColor(#666); TextClock() .fontSize(20); // 2. 自定义时间格式 Text(2. 自定义格式年月日 星期 时分秒).fontSize(14).fontColor(#666); TextClock() .format(yyyy-MM-dd EEEE HH:mm:ss) .fontSize(18); // 3. 12小时制 前导零 Text(3. 12小时制带前导零).fontSize(14).fontColor(#666); TextClock() .format(aa hh:mm:ss) .dateTimeOptions({ hour: 2-digit }) .fontSize(20) .fontColor(#007DFF); // 4. 24小时制去掉前导零 Text(4. 24小时制无前置零).fontSize(14).fontColor(#666); TextClock() .format(HH:mm:ss) .dateTimeOptions({ hour: numeric }) .fontSize(20) .fontColor(#FF7D00); // 5. 字体样式 阴影 Text(5. 字体加粗 斜体 阴影).fontSize(14).fontColor(#666); TextClock() .format(HH:mm:ss) .fontSize(26) .fontWeight(FontWeight.Bold) .fontStyle(FontStyle.Italic) .textShadow(this.shadowStyle) .fontColor(#182431); // 6. 控制器启停 时间变化回调 Text(6. 启停控制 时间监听).fontSize(14).fontColor(#666); TextClock({ controller: this.controller }) .format(HH:mm:ss) .fontSize(24) .fontColor(#009955) .onDateChange((timestamp: number) { console.info(当前时间戳秒, timestamp.toString()); }); // 控制按钮 Row({ space: 15 }) { Button(启动时钟) .onClick(() { this.controller.start(); }) .backgroundColor(#007DFF); Button(停止时钟) .onClick(() { this.controller.stop(); }) .backgroundColor(#FF4444); } // 7. 等宽数字效果fontFeature Text(7. 等宽数字时钟fontFeature).fontSize(14).fontColor(#666); TextClock() .format(HH:mm:ss) .fontSize(22) .fontFeature(ss01 on) .fontColor(#6200EE); } .width(100%) .padding(15) .backgroundColor(#F5F5F5) .height(100%); } }运行效果如图核心功能模块解析1 基础默认用法不配置任何格式化参数时TextClock自动跟随系统默认时间格式展示开箱即用TextClock().fontSize(20);2 format 自定义时间格式通过format属性自定义时间模板支持年、月、日、时、分、秒、星期、上/下午标识组合yyyy四位年份MM两位月份dd日期EEEE完整星期HH24小时制hh12小时制aa上/下午标识示例TextClock().format(yyyy-MM-dd EEEE HH:mm:ss)3 dateTimeOptions 数字格式化用于控制时间数字展示规则常用配置hour: 2-digit小时补前导零hour: numeric小时不补零适配 12小时制、24小时制差异化展示需求。4 文字样式与阴影定制复用通用文本类属性快速美化时钟样式基础样式fontSize、fontColor、fontWeight、fontStyle高级样式textShadow配置文字阴影增强视觉层次感5 TextClockController 控制器通过构造实例绑定组件实现时钟生命周期控制start()开启时间自动刷新stop()暂停时间刷新适合需要定时开关、页面销毁暂停时钟的业务场景。6 onDateChange 时间回调时间每一次刷新都会触发onDateChange回调返回时间戳可用于日志打印时间联动其他组件更新业务时间逻辑判断7 fontFeature 高级字体特性通过fontFeature配置字体特性示例中开启等宽数字解决时间数字跳动、宽度不一致问题提升UI美观度。核心对象与类型说明TextClockController时钟控制器提供启停能力为组件双向控制核心类。ShadowOptions阴影配置对象包含模糊半径、颜色、X/Y轴偏移量统一管理文字阴影样式。运行效果说明页面垂直排列 7 种不同类型的 TextClock 展示案例涵盖默认样式、全量日期时间、12/24小时制、阴影美化、可控时钟、等宽数字点击按钮可手动启动/停止时钟刷新时间变化实时打印日志便于调试与二次开发。总结TextClock是鸿蒙轻量高效的实时时间展示组件原生自动刷新支持格式自定义、样式美化、状态控制、事件监听全场景能力示例代码覆盖官方文档主流示例用法可直接复制到项目中运行复用组件扩展性强可快速集成到首页、个人中心、状态栏等需要展示实时时间的页面。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力