行业资讯
HarmonyOS ArkTS 实战：实现一个精准秒表应用
HarmonyOS ArkTS 实战实现一个精准秒表应用项目效果本文实现的是一个基于 HarmonyOS 和 ArkTS 的精准秒表应用。项目中使用 ArkUI 组件完成页面布局通过State管理状态数据实现开始/暂停/重置计时、计次功能、计次记录列表、毫秒级精度显示和大字体时间显示等功能。最终运行效果如下页面主要包含以下内容顶部应用标题大字体时间显示分:秒.毫秒开始/暂停按钮计次/重置按钮计次记录列表计次序号、分段时间和总时间空状态提示页面整体采用 ArkUI 声明式布局。本文重点是演示如何在 HarmonyOS 项目中使用 ArkTS 和 ArkUI 实现一个精准计时类单页面应用。项目代码主要写在entry/src/main/ets/pages/Index.ets文件中适合作为 HarmonyOS ArkTS 入门到进阶之间的练习案例。前言秒表是生活中常用的计时工具无论是运动计时、实验记录还是游戏测速都需要一个精准易用的秒表。手机自带的秒表往往功能简单而我们可以自己实现一个功能完整、界面美观的秒表应用。从应用开发角度来看这个项目不依赖后端接口也不需要数据库但能练习 ArkTS 中的状态管理、高精度定时器、时间格式化、列表渲染和按钮交互等内容。本文基于 HarmonyOS 和 ArkTS 实现一个精准秒表应用。用户可以开始、暂停和重置计时记录计次分段时间查看每次计次的详细数据。这个项目的核心不是简单的数字累加而是精准的时间控制和计次功能。每一次开始、暂停、计次和重置本质上都是对计时器状态的管理。状态变化后页面会自动刷新这正是 ArkUI 声明式开发的基本思想。一、项目目标本次实践主要实现以下目标创建 HarmonyOS ArkTS 页面使用Entry和Component定义页面组件使用State管理页面状态使用高精度定时器实现毫秒级计时实现开始/暂停功能实现重置功能实现计次功能格式化时间显示分:秒.毫秒记录每次计次的分段时间记录每次计次的总时间使用List和ForEach渲染计次记录使用空状态提示优化无计次页面使用Builder封装按钮和计次项完成一个可以运行的秒表页面。这个项目虽然是单页面应用但它有完整的计时控制、计次记录和时间显示功能比普通静态页面更适合练习 ArkTS。二、技术栈类型内容开发方向HarmonyOS 应用开发开发语言ArkTSUI 框架ArkUISDK 版本HarmonyOS API 23 及以上工程模型Stage 模型核心组件Text / Button / Column / Row / List / ForEach状态管理State数据处理时间计算 / 高精度计时 / 数组操作项目入口entry/src/main/ets/pages/Index.ets运行平台模拟器或真机本项目是 HarmonyOS 原生 ArkTS 项目。页面主体由 ArkUI 组件构建核心逻辑写在Index.ets文件中不依赖后端接口也不需要额外配置数据库。三、为什么选择秒表项目精准秒表应用适合作为 ArkTS 练习项目主要有以下几个原因。第一实用性强。秒表是非常经典的工具类应用在很多场景下都会用到。第二业务场景真实。运动、实验、游戏等场景都需要计时功能是手机必备工具之一。第三适合练习状态管理。运行状态、经过时间、开始时间、计次记录都属于页面状态。状态变化后页面会自动刷新。第四适合练习定时器使用。高精度计时需要使用定时器这是前端开发中重要的基础技能。第五适合练习时间格式化。将毫秒数格式化为易读的分秒毫秒格式是常见的开发需求。第六扩展空间比较大。基础功能完成后可以继续增加倒计时、倒计时秒表切换、计时分享、本地保存记录和多组计时功能。在本项目中计时器状态和计次记录是核心数据。页面中的时间显示和计次列表都由它们计算或渲染得到。四、功能规则说明计时精度10毫秒0.01秒更新频率100次/秒。按钮状态规则当前状态主按钮副按钮初始状态开始重置禁用运行中暂停计次暂停中开始重置计次规则点击计次按钮记录当前时间点分段时间 当前总时间 - 上一次计次总时间计次按倒序显示最新的在最上面最多记录99次计次时间显示格式MM:SS.cc例如01:23.45表示1分23秒45。五、项目结构本项目主要修改首页文件entry └── src └── main └── ets └── pages └── Index.ets其中文件作用Index.ets编写页面结构、状态数据和秒表计时逻辑本文不涉及复杂路由也不需要额外创建多个页面。对于练习项目来说把主要逻辑集中在一个Index.ets文件中更方便理解。如果后续继续扩展可以考虑把时间显示组件、控制按钮和计次项拆分成独立组件。六、核心实现思路本项目的核心流程如下定义计次记录数据结构使用State保存运行状态、经过时间、定时器ID和计次记录点击开始按钮启动定时器每10毫秒更新一次经过时间点击暂停按钮停止定时器点击计次按钮记录当前时间计算分段时间和总时间点击重置按钮清空所有数据格式化时间显示为易读格式使用ForEach渲染计次记录列表根据当前状态动态改变按钮文字和功能没有计次时显示空状态提示。项目中最重要的状态变量如下State isRunning: boolean false State elapsedTime: number 0 State timerId: number -1 State lastLapTime: number 0 State laps: LapRecord[] [] State nextLapNumber: number 1其中状态变量作用isRunning计时器是否运行中elapsedTime经过的总时间毫秒timerId定时器IDlastLapTime上一次计次的时间laps计次记录数组nextLapNumber下一个计次的序号elapsedTime和laps是本项目中最重要的数据。时间显示和计次列表都依赖这两个状态。七、Index.ets 完整代码打开文件entry/src/main/ets/pages/Index.ets将其中内容替换为下面代码interfaceLapRecord{number:numbersplitTime:numbertotalTime:number}EntryComponentstruct Index{StateisRunning:booleanfalseStateelapsedTime:number0StatetimerId:number-1StatelastLapTime:number0StatenextLapNumber:number1Statelaps:LapRecord[][]privatestartTime:number0aboutToDisappear(){this.stopTimer()}privatestartTimer():void{if(this.isRunning)returnthis.isRunningtruethis.startTimeDate.now()-this.elapsedTimethis.timerIdsetInterval((){this.elapsedTimeDate.now()-this.startTime},10)}privatepauseTimer():void{if(!this.isRunning)returnthis.isRunningfalsethis.stopTimer()}privatestopTimer():void{if(this.timerId!-1){clearInterval(this.timerId)this.timerId-1}}privateresetTimer():void{this.pauseTimer()this.elapsedTime0this.lastLapTime0this.nextLapNumber1this.laps[]}privaterecordLap():void{if(!this.isRunning)returnif(this.laps.length99)returnletsplitTimethis.elapsedTime-this.lastLapTimeletlap:LapRecord{number:this.nextLapNumber,splitTime:splitTime,totalTime:this.elapsedTime}this.laps[lap,...this.laps]this.lastLapTimethis.elapsedTimethis.nextLapNumber}privateformatTime(ms:number):string{letminutesMath.floor(ms/60000)letsecondsMath.floor((ms%60000)/1000)letcentisecondsMath.floor((ms%1000)/10)return${this.formatTwo(minutes)}:${this.formatTwo(seconds)}.${this.formatTwo(centiseconds)}}privateformatTwo(value:number):string{returnvalue10?0value.toString():value.toString()}privategetFastestLap():number{if(this.laps.length2)return-1letminTimeMath.min(...this.laps.map(ll.splitTime))returnthis.laps.find(ll.splitTimeminTime)?.number||-1}privategetSlowestLap():number{if(this.laps.length2)return-1letmaxTimeMath.max(...this.laps.map(ll.splitTime))returnthis.laps.find(ll.splitTimemaxTime)?.number||-1}BuilderControlButton(text:string,color:string,bgColor:string,onClick:()void){Button(text).width(80).height(80).fontSize(18).fontColor(color).backgroundColor(bgColor).borderRadius(40).onClick(onClick)}BuilderLapItem(lap:LapRecord){letfastestthis.getFastestLap()letslowestthis.getSlowestLap()lettextColor#182431if(lap.numberfastest){textColor#10B981}elseif(lap.numberslowest){textColor#EF4444}Row(){Text(计次${lap.number}).fontSize(15).fontColor(#6B7280).width(80)Text(this.formatTime(lap.splitTime)).fontSize(16).fontWeight(FontWeight.Medium).fontColor(textColor).layoutWeight(1).textAlign(TextAlign.Center)Text(this.formatTime(lap.totalTime)).fontSize(16).fontColor(#182431).width(100).textAlign(TextAlign.End)}.width(100%).padding(16).margin({bottom:1}).backgroundColor(Color.White)}build(){Column(){Text(秒表).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#182431).margin({top:22})Text(基于 HarmonyOS ArkTS 的精准计时工具).fontSize(14).fontColor(#6B7280).margin({top:8,bottom:40})Text(this.formatTime(this.elapsedTime)).fontSize(72).fontWeight(FontWeight.Bold).fontColor(#182431).fontFamily(monospace).textAlign(TextAlign.Center).margin({bottom:60})Row(){if(this.isRunning){this.ControlButton(计次,#0A59F7,#EFF6FF,(){this.recordLap()})}else{this.ControlButton(重置,this.elapsedTime0?#EF4444:#9CA3AF,this.elapsedTime0?#FEF2F2:#F3F4F6,(){this.resetTimer()})}Blank()if(this.isRunning){this.ControlButton(暂停,#F59E0B,#FEF3C7,(){this.pauseTimer()})}else{this.ControlButton(开始,#10B981,#D1FAE5,(){this.startTimer()})}}.width(100%).padding({left:30,right:30}).margin({bottom:30})if(this.laps.length0){Row(){Text(计次).fontSize(13).fontColor(#9CA3AF).width(80)Text(分段时间).fontSize(13).fontColor(#9CA3AF).layoutWeight(1).textAlign(TextAlign.Center)Text(总时间).fontSize(13).fontColor(#9CA3AF).width(100).textAlign(TextAlign.End)}.width(100%).padding({left:16,right:16,top:12,bottom:12}).backgroundColor(#F9FAFB)}if(this.laps.length0){Column(){Text(暂无计次记录).fontSize(16).fontColor(#6B7280)Text(开始计时后点击计次按钮记录分段时间).fontSize(13).fontColor(#9CA3AF).margin({top:8})}.width(100%).padding(30).backgroundColor(Color.White).borderRadius(16)}else{List(){ForEach(this.laps,(lap:LapRecord){ListItem(){this.LapItem(lap)}},(lap:LapRecord)lap.number.toString())}.width(100%).layoutWeight(1).scrollBar(BarState.Off).borderRadius(16).clip(true)}}.width(100%).height(100%).padding({left:18,right:18}).backgroundColor(#F5F7FA)}}八、代码实现说明1. 高精度计时使用Date.now()获取时间戳计算经过的时间而不是简单累加这样可以避免定时器误差累积this.startTimeDate.now()-this.elapsedTimethis.timerIdsetInterval((){this.elapsedTimeDate.now()-this.startTime},10)每10毫秒更新一次实现10毫秒精度。2. 时间格式化将毫秒数格式化为MM:SS.cc格式privateformatTime(ms:number):string{letminutesMath.floor(ms/60000)letsecondsMath.floor((ms%60000)/1000)letcentisecondsMath.floor((ms%1000)/10)return${this.formatTwo(minutes)}:${this.formatTwo(seconds)}.${this.formatTwo(centiseconds)}}3. 按钮状态管理根据当前运行状态动态改变按钮的文字、颜色和功能未运行且时间为0开始/重置禁用运行中暂停/计次暂停中开始/重置4. 计次功能记录每次计次的分段时间和总时间最快计次显示绿色最慢计次显示红色letsplitTimethis.elapsedTime-this.lastLapTimeletlap:LapRecord{number:this.nextLapNumber,splitTime:splitTime,totalTime:this.elapsedTime}5. 定时器清理页面销毁时清除定时器避免内存泄漏aboutToDisappear(){this.stopTimer()}九、运行项目代码编写完成后在DevEco Studio中运行项目。测试开始/暂停/重置、计次功能检查时间显示是否准确计次记录是否正确。十、开发中遇到的问题定时器误差问题使用时间戳计算而不是累加避免误差累积按钮状态切换根据不同状态显示不同按钮最快最慢计次标记自动识别并高亮显示等宽字体使用monospace字体让数字对齐更美观十一、总结本文基于HarmonyOS和ArkTS实现了一个精准秒表应用。项目通过State管理计时状态使用高精度定时器实现毫秒级计时实现了开始/暂停/重置、计次记录和时间格式化等功能。这个项目展示了ArkTS中定时器使用、时间计算和状态管理的基本方法适合作为入门练习项目。
郑州网站建设
网页设计
企业官网
)
