及时做APP开发实战(五)-番茄钟计时器UI实现本文将详细介绍如何在HarmonyOS NEXT中实现番茄钟计时器UI包括倒计时界面、控制按钮和休息提醒等功能。一、番茄钟状态设计1.1 状态变量番茄钟页面需要管理多种状态EntryComponentstruct PomodoroPage{// 计时状态StatetimeLeft:number25*60;// 剩余时间秒StateisRunning:booleanfalse;// 是否运行中StateisPaused:booleanfalse;// 是否暂停StateisBreak:booleanfalse;// 是否休息时间StatepomodoroCount:number0;// 今日完成数// 待办选择StatecurrentTodo:TodoItem|nullnull;StatetodoList:TodoItem[][];StateshowTodoPicker:booleanfalse;// 定时器privatetimerId:number-1;}1.2 页面结构┌────────────────────────────┐ │ 标题栏 番茄钟 计数 │ ├────────────────────────────┤ │ 当前待办选择 │ ├────────────────────────────┤ │ 圆形进度条 时间显示 │ ├────────────────────────────┤ │ 控制按钮重置/开始/跳过 │ ├────────────────────────────┤ │ 今日统计完成数/时长 │ └────────────────────────────┘二、待办选择功能2.1 当前待办显示点击待办区域弹出选择器BuilderCurrentTodoSection(){Column(){if(this.currentTodo){Row(){Text(当前任务).fontSize(14).fontColor(#666666)Text(this.currentTodo.text).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).layoutWeight(1)}.width(100%).padding(15).backgroundColor(#FFFFFF).borderRadius(8).onClick((){this.showTodoPickertrue;})}else{Row(){Text(点击选择待办任务).fontSize(16).fontColor(#999999)Blank()Text().fontSize(16).fontColor(#999999)}.width(100%).padding(15).backgroundColor(#FFFFFF).borderRadius(8).onClick((){this.showTodoPickertrue;})}}.width(100%).padding({left:15,right:15,top:15})}2.2 待办选择器弹窗使用bindSheet绑定半模态弹窗BuilderTodoPickerSheet(){Column(){Text(选择待办任务).fontSize(20).fontWeight(FontWeight.Bold).margin({top:20,bottom:20})List(){ForEach(this.todoList,(todo:TodoItem){ListItem(){Row(){Text(todo.text).fontSize(16).fontColor(#333333).layoutWeight(1)if(todo.pomodoroCount0){Text( ×${todo.pomodoroCount}).fontSize(14).fontColor(#FF6B6B)}}.width(100%).padding(15).backgroundColor(this.currentTodo?.idtodo.id?#FFE5E5:#FFFFFF).borderRadius(8).onClick((){this.selectTodo(todo);})}})}.width(100%).layoutWeight(1)}}// 在build()中绑定.bindSheet($$this.showTodoPicker,this.TodoPickerSheet(),{height:400,backgroundColor:Color.White,dragBar:true})三、计时器核心实现3.1 计时器UI使用Progress组件实现圆形进度条BuilderTimerSection(){Column(){// 状态提示Text(this.isBreak?休息时间:专注时间).fontSize(18).fontColor(this.isBreak?#4CAF50:#FF6B6B).margin({bottom:20})// 圆形进度条Stack(){Progress({value:this.getProgress(),total:100,type:ProgressType.Ring}).width(280).height(280).color(this.isBreak?#4CAF50:#FF6B6B).backgroundColor(#E0E0E0).style({strokeWidth:8})// 时间显示Column(){Text(this.formatTime(this.timeLeft)).fontSize(64).fontWeight(FontWeight.Bold).fontColor(#333333)if(this.isPaused){Text(已暂停).fontSize(14).fontColor(#999999).margin({top:10})}}}.width(280).height(280)}.width(100%).padding({top:30,bottom:30}).justifyContent(FlexAlign.Center)}3.2 计时逻辑使用setInterval实现倒计时// 开始计时startTimer(){if(this.timeLeft0)return;this.isRunningtrue;this.isPausedfalse;this.timerIdsetInterval((){if(this.timeLeft0){this.timeLeft--;}else{this.onTimerComplete();}},1000);}// 暂停计时pauseTimer(){this.isPausedtrue;this.isRunningfalse;this.stopTimer();}// 重置计时器resetTimer(){this.stopTimer();this.isRunningfalse;this.isPausedfalse;if(this.isBreak){this.timeLeft5*60;// 短休息}else{this.timeLeft25*60;// 专注时间}}3.3 完成处理番茄钟完成后保存记录并进入休息asynconTimerComplete(){this.stopTimer();this.isRunningfalse;if(this.isBreak){// 休息结束开始新的番茄钟this.isBreakfalse;this.timeLeft25*60;}else{// 番茄钟完成this.pomodoroCount;// 保存记录if(this.currentTodo){awaitthis.pomodoroViewModel.completePomodoro(this.currentTodo.id,25);}// 判断是否需要长休息if(this.pomodoroCount%40){this.timeLeft15*60;// 长休息}else{this.timeLeft5*60;// 短休息}this.isBreaktrue;}}四、控制按钮4.1 按钮组件根据不同状态显示不同按钮BuilderControlButtons(){Row(){// 重置按钮Button(重置).width(80).height(50).backgroundColor(#E0E0E0).fontColor(#666666).borderRadius(25).onClick((){this.resetTimer();})// 开始/暂停/继续按钮if(!this.isRunning!this.isPaused){Button(开始).width(120).height(60).fontSize(20).fontWeight(FontWeight.Bold).backgroundColor(this.isBreak?#4CAF50:#FF6B6B).fontColor(#FFFFFF).borderRadius(30).margin({left:20,right:20}).onClick((){this.startTimer();})}elseif(this.isRunning){Button(暂停).width(120).height(60).fontSize(20).fontWeight(FontWeight.Bold).backgroundColor(#FF9800).fontColor(#FFFFFF).borderRadius(30).margin({left:20,right:20}).onClick((){this.pauseTimer();})}else{Button(继续).width(120).height(60).fontSize(20).fontWeight(FontWeight.Bold).backgroundColor(this.isBreak?#4CAF50:#FF6B6B).fontColor(#FFFFFF).borderRadius(30).margin({left:20,right:20}).onClick((){this.resumeTimer();})}// 跳过休息按钮仅休息时显示if(this.isBreak){Button(跳过).width(80).height(50).backgroundColor(#E0E0E0).fontColor(#666666).borderRadius(25).onClick((){this.skipBreak();})}}.width(100%).justifyContent(FlexAlign.Center)}五、统计与休息机制5.1 今日统计显示今日完成的番茄钟数量和专注时长BuilderPomodoroStats(){Column(){Row(){Column(){Text(this.pomodoroCount.toString()).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#FF6B6B)Text(今日完成).fontSize(12).fontColor(#666666)}.layoutWeight(1)Column(){Text(${Math.floor(this.pomodoroCount*25/60)}h${this.pomodoroCount*25%60}m).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#4CAF50)Text(专注时长).fontSize(12).fontColor(#666666)}.layoutWeight(1)}.width(100%)}.width(100%).padding(20).backgroundColor(#FFFFFF).margin({top:20}).borderRadius(8)}5.2 休息机制番茄钟流程 ┌─────────────┐ │ 专注25分钟 │ └──────┬──────┘ │ ┌──────▼──────┐ │ 短休息5分钟 │ ← 每4个番茄钟后 └──────┬──────┘ │ └──→ 长休息15分钟休息时间特点短休息每个番茄钟后休息5分钟长休息每4个番茄钟后休息15分钟颜色区分休息时界面变为绿色可跳过提供跳过按钮快速进入下一个番茄钟六、小结本文实现了番茄钟计时器页面的完整功能包括✅ 待办选择功能✅ 圆形进度条计时器✅ 开始/暂停/继续/重置控制✅ 休息提醒机制✅ 今日统计展示✅ 数据持久化保存至此及时做应用的核心功能已全部实现。用户可以在待办列表页管理任务在番茄钟页专注计时自动记录专注数据