# 鸿蒙 HarmonyOS 应用开发实战（第31期）｜模拟时钟（Analog Clock）— Stack 布局与旋转动画精讲

一、应用概述模拟时钟Analog Clock是一款经典的桌面时钟应用它以传统钟表的指针式设计展示当前系统时间。应用通过时针、分针、秒针三根独立指针的旋转角度来直观呈现时间信息同时辅以数字时间显示兼顾美观与功能性。项目基于 HarmonyOS 的 ArkTS 语言和声明式 UI 框架构建完美展示了 Stack 层叠布局、Circle 圆形组件、rotate 旋转变换以及 setInterval 定时器等核心技术的综合运用。对于鸿蒙开发者而言模拟时钟是一个极佳的技术练兵场——它让你在极少的代码量中同时掌握坐标定位、中心旋转、实时刷新三大关键能力这些能力广泛适用于仪表盘、进度指示器、游戏等场景。二、技术架构与组件树2.1 整体架构Entry Component struct index31 ├── Column (根容器) │ ├── Row (顶部导航栏) │ │ ├── Text (‹ 返回) │ │ ├── Text ( 模拟时钟) │ │ └── Blank (弹性空白) │ └── Column (主内容区, layoutWeight1, 居中) │ └── Stack (钟表盘, 280×280) │ ├── Circle (白色表盘背景) │ ├── Text×12 (刻度数字 I ~ XII) │ ├── Column (时针——旋转) │ ├── Column (分针——旋转) │ ├── Column (秒针——旋转) │ └── Circle (中心圆点)2.2 Entry 与 ComponentEntry Component struct index31 {Entry装饰器标识该组件为页面的入口组件允许通过路由直接跳转。Component声明这是一个可复用的自定义组件。在 HarmonyOS 中每个页面通常由一个Entry Component结构体承载。2.3 State 驱动 UI 刷新State time: string 00:00:00; intervalId: number -1;State是 ArkTS 最核心的响应式装饰器。当time值发生变化时框架自动重新渲染所有依赖time的 UI 部分。intervalId是非响应式的普通变量用于保存定时器句柄避免不必要的渲染。三、生命周期管理3.1 aboutToAppear — 页面初始化aboutToAppear(): void { this.updateTime(); this.intervalId setInterval((): void { this.updateTime(); }, 1000); }aboutToAppear在组件即将挂载时调用等效于传统 Android 的onStart或 iOS 的viewDidLoad。这里做了两件事立即调用updateTime()获取当前时间避免首次渲染时显示00:00:00的默认值。启动定时器每秒更新一次时间。3.2 aboutToDisappear — 资源清理aboutToDisappear(): void { clearInterval(this.intervalId); }当页面被销毁如通过router.back()返回上一页时aboutToDisappear被触发。务必在此清除定时器否则定时器会持续运行导致内存泄漏甚至崩溃。这是 HarmonyOS 开发中容易被忽视但非常重要的最佳实践。四、核心代码深度解析4.1 时间字符串的获取updateTime(): void { const now new Date(); const hh now.getHours().toString().padStart(2, 0); const mm now.getMinutes().toString().padStart(2, 0); const ss now.getSeconds().toString().padStart(2, 0); this.time hh : mm : ss; }通过标准 JavaScriptDate对象获取时、分、秒并使用padStart(2, 0)确保始终为两位数如09:05:03。然后将格式化后的字符串存入State time驱动 UI 更新。4.2 指针角度的计算get hourDeg(): number { const h parseInt(this.time.slice(0, 2)); return (h % 12) * 30 parseInt(this.time.slice(3, 5)) * 0.5; } get minDeg(): number { return parseInt(this.time.slice(3, 5)) * 6; } get secDeg(): number { return parseInt(this.time.slice(6, 8)) * 6; }这三个计算属性getter是时钟的核心逻辑秒针角度每秒 6°360° ÷ 60 秒分针角度每分钟 6°360° ÷ 60 分钟时针角度每小时 30°360° ÷ 12 小时 每分钟 0.5°30° ÷ 60 分钟时针角度叠加了分钟偏移使得指针能够在两小时之间平滑过渡这是区分专业时钟与简陋时钟的关键细节。4.3 Stack 层叠布局与刻度定位Stack() { Circle().width(280).height(280).fill(#fff) .shadow({ radius: 12, color: #30000000, offsetY: 4 }) Text(XII).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333) .position({ x: 128, y: 12 }) Text(III).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333) .position({ x: 258, y: 130 }) // ... 其余刻度Stack是一个层叠容器所有子组件按声明顺序从下至上堆叠。position({ x, y })使用相对于 Stack 容器左上角的绝对坐标定位坐标原点在容器的 (0,0) 位置。这里有一个精妙的设计钟表盘尺寸为 280×280中心点为 (140, 140)。12 点刻度 Text(“XII”) 的位置为 (128, 12)即距离顶部 12px水平居中。每个刻度数字的坐标都经过手工计算确保它们均匀分布在圆周上。4.4 rotate 旋转实现指针转动// 时针 Column() { Text().width(5).height(70).backgroundColor(#333).borderRadius(3) } .rotate({ angle: this.hourDeg, centerX: 140, centerY: 140 }) .position({ x: 137.5, y: 75 }) // 分针 Column() { Text().width(4).height(100).backgroundColor(#555).borderRadius(2) } .rotate({ angle: this.minDeg, centerX: 140, centerY: 140 }) .position({ x: 138, y: 45 }) // 秒针 Column() { Text().width(2).height(110).backgroundColor(#F44336).borderRadius(1) } .rotate({ angle: this.secDeg, centerX: 140, centerY: 140 }) .position({ x: 139, y: 35 })指针的实现方式非常巧妙——三根指针实际上是三个空的 Column 容器内部只有一个Text()空文本元素通过设置width和height形成一个矩形条。然后通过borderRadius将矩形条两端变圆模拟指针外观。.rotate()是实现指针旋转的核心 APIangle: 旋转角度度数正值为顺时针旋转centerX/centerY: 旋转中心这里设置为 (140, 140)即表盘中心指针的position坐标需要精心计算。以时针为例时针长 70px中心在 (140,140)因此时针的顶部起点 y 坐标为140 - 70 5 75加了 5px 的偏移让指针看起来更自然x 坐标为140 - (5/2) 137.5宽度为 5px需要减去一半来居中。秒针和分针的计算逻辑相同。4.5 中心圆点与数字时间Circle().width(10).height(10).fill(#333) .position({ x: 135, y: 135 })一个直径 10px 的小圆覆盖在三根指针的交汇处遮盖指针底部使视觉效果更加整洁。底部的数字时间使用 Courier New 等宽字体与指针式钟表形成有趣的对比——既有传统的模拟显示又有精确的数字显示。五、HarmonyOS 特性分析5.1 Stack 层叠布局Stack是 HarmonyOS 中最强大的布局容器之一适用于重叠 UI如本例中的表盘 刻度 指针徽标Badge在头像右上角显示未读消息数遮罩层在图片上方叠加半透明文字使用Stack时子组件通过position()进行绝对定位或通过alignContent进行相对对齐。在本项目中所有子组件都使用position()精确定位。5.2 Circle 圆形组件Circle是 ArkTS 内置的形状组件用于绘制正圆或椭圆。相较于通过 CSSborderRadius: 50%模拟圆形的方式Circle更加语义化且性能更优。常用 APIwidth/height设置直径fill填充颜色stroke/strokeWidth描边颜色与宽度shadow阴影效果5.3 setInterval / clearInterval 定时器this.intervalId setInterval((): void { this.updateTime(); }, 1000); clearInterval(this.intervalId);setInterval是 HarmonyOS 提供的全局定时器函数返回一个数值类型的 id。执行周期性任务时应当注意将 id 保存在普通成员变量中非State在aboutToDisappear中通过clearInterval清除避免在定时器回调中执行耗时操作超过间隔时间会导致任务堆积六、UI/UX 设计与最佳实践6.1 视觉设计亮点干净的白色表盘白色背景配合柔和阴影 (rgba(0,0,0,0.19)) 营造出浮动的立体感。指针差异化时针最粗 (5px) 且颜色最深 (#333)分针适中 (4px, #555)秒针最细 (2px) 且使用醒目的红色 (#F44336)。这种设计让用户能一眼区分三根指针。刻度精确标注12 个主要刻度全部标注没有使用简化的四点标注法提升了时钟的专业感。6.2 最佳实践实践说明定时器生命周期管理在aboutToDisappear中clearInterval防止页面销毁后定时器继续运行计算属性分离逻辑使用 getter 替代在 build 中计算角度使构建函数更简洁且易于测试不可变数据更新每次更新State time时赋予全新字符串而非修改现有字符串弹性居中layoutWeight(1)justifyContent(FlexAlign.Center)确保内容垂直居中返回导航统一的‹ 返回样式和router.back()逻辑保持全应用导航一致性6.3 响应式适配建议当前应用固定了 280×280 的表盘尺寸若要适配不同屏幕建议private clockSize: number Math.min(this.screenWidth, this.screenHeight) * 0.7;然后所有坐标和尺寸都基于this.clockSize进行等比缩放。对于文本刻度可以使用this.clockSize * 0.05等比例方式计算字体大小。七、可扩展思路主题切换支持深色模式、自定义表盘颜色和背景图片。闹钟功能结合ohos.notification和ohos.permission实现闹钟提醒。秒表/计时器在页面内增加 Tab 切换集成秒表和倒计时功能。世界时钟同时显示多个时区的时间适合旅行者使用。指针动画平滑化当前是每秒跳转一次秒针的跳秒效果可以改为使用animateTo实现平滑过渡。八、总结模拟时钟应用麻雀虽小五脏俱全仅用 95 行代码就实现了一个功能完整的钟表应用。它完美示范了 ArkTS 声明式 UI 的几个核心范式响应式状态管理State自动追踪数据变化并更新 UI声明式布局Stackposition实现精确的层叠定位属性级动画rotate的 angle 属性实时变化驱动指针转动生命周期钩子aboutToAppear启动定时器aboutToDisappear清理资源这些知识模块可以无缝迁移到更复杂的应用场景中。无论你是刚接触 HarmonyOS 开发的新手还是想要巩固 ArkTS 基础的有经验开发者模拟时钟都是一个绝佳的练手项目。在下一期的实战文章中我们将探讨一个更具实用价值的工具——间隔计时器Interval Timer看它如何利用同样的定时器机制为健身训练提供精确的间歇计时功能。本文是 HarmonyOS 应用开发实战系列第 31 期更多内容请关注专栏。