及时做APP开发实战(七)-专注时长实时累加实现

本文将详细介绍番茄钟专注时长的实时累加实现，让用户能够实时看到专注成果的积累。

一、问题背景

1.1 问题现象

在番茄钟应用中，用户希望实时看到专注时长的累加，而不是等到番茄钟完成才更新。原实现存在以下问题：

┌─────────────────────────────────────┐ │ 问题现象示意 │ ├─────────────────────────────────────┤ │ 专注10分钟 → 显示0分钟（未完成） │ │ 提前结束 → 专注时长丢失 │ │ 用户无法实时看到专注成果 │ └─────────────────────────────────────┘

1.2 问题分析

原代码只在番茄钟完成时一次性累加：

// 问题代码：只在完成时累加timerId=setInterval(()=>{if(this.timeLeft>0){this.timeLeft--;// 只减少剩余时间}else{this.onTimerComplete();}},1000);// 完成时一次性累加onTimerComplete(){this.totalFocusMinutes+=this.customDuration;}

问题根源：

• 专注时长totalFocusMinutes只在完成时更新
• 无法实时反映用户的专注进度
• 提前结束时专注时长丢失

二、解决方案

2.1 核心思路

┌─────────────────────────────────────┐ │ 解决思路 │ ├─────────────────────────────────────┤ │ 1. 新增变量记录当前番茄钟秒数进度 │ │ 2. 每秒累加，满60秒更新一次专注时长 │ │ 3. 完成时处理不足60秒的部分 │ │ 4. 区分专注时间和休息时间 │ └─────────────────────────────────────┘

2.2 变量设计

┌─────────────────────────────────────┐ │ 双变量设计 │ ├─────────────────────────────────────┤ │ totalFocusMinutes 总专注时长 │ │ （@State，用于UI显示） │ │ │ │ currentFocusSeconds 当前秒数进度 │ │ （private，用于累加计算） │ └─────────────────────────────────────┘

2.3 代码实现

@Entry@Componentstruct PomodoroTimer{@StatetotalFocusMinutes:number=0;// 总专注时长（分钟）privatecurrentFocusSeconds:number=0;// 当前番茄钟已专注秒数@StateisBreak:boolean=false;// 是否休息时间@StatetimeLeft:number=25*60;@StateisRunning:boolean=false;privatetimerId:number=-1;// 开始计时startTimer(){if(this.isRunning)return;this.isRunning=true;this.timerId=setInterval(()=>{if(this.timeLeft>0){this.timeLeft--;// 实时累加专注时长（仅在专注时间，非休息时间）if(!this.isBreak){this.currentFocusSeconds++;// 每满60秒，增加1分钟专注时长if(this.currentFocusSeconds>=60){this.totalFocusMinutes++;this.currentFocusSeconds=0;}}}else{this.onTimerComplete();}},1000);}// 计时完成onTimerComplete(){clearInterval(this.timerId);this.isRunning=false;// 处理最后不足60秒的专注时间if(this.currentFocusSeconds>0){// 四舍五入：超过30秒算1分钟if(this.currentFocusSeconds>=30){this.totalFocusMinutes++;}this.currentFocusSeconds=0;}}// 重置计时器resetTimer(){clearInterval(this.timerId);this.isRunning=false;this.currentFocusSeconds=0;// 重置专注秒数this.timeLeft=25*60;}}

• 更改后结果图
  
  倒计时减少一分钟，专注计时增加一分钟
  

三、关键设计点

3.1 休息时间判断

if(!this.isBreak){// 仅在专注时间累加，休息时间不累加this.currentFocusSeconds++;}

这样可以确保：

• 专注时间：累加专注时长
• 休息时间：不累加专注时长

3.2 不足1分钟的处理

采用四舍五入策略：

┌─────────────────────────────────────┐ │ 四舍五入策略 │ ├─────────────────────────────────────┤ │ 专注45秒 → 超过30秒 → 算作1分钟 │ │ 专注20秒 → 不足30秒 → 忽略 │ └─────────────────────────────────────┘

if(this.currentFocusSeconds>=30){this.totalFocusMinutes++;}

3.3 完整UI示例

@Entry@Componentstruct FocusTimerPage{@StatetimeLeft:number=25*60;@StatetotalFocusMinutes:number=0;@StateisRunning:boolean=false;@StateisBreak:boolean=false;privatecurrentFocusSeconds:number=0;privatetimerId:number=-1;build(){Column(){// 显示总专注时长Row(){Text('今日专注').fontSize(14).fontColor('#666666')Text(`${this.totalFocusMinutes}分钟`).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#FF6B6B')}.margin({bottom:20})// 进度条Progress({value:this.getProgress(),total:100,type:ProgressType.Ring}).width(200).height(200).color(this.isBreak?'#4CAF50':'#FF6B6B')// 时间显示Text(this.formatTime(this.timeLeft)).fontSize(48).fontWeight(FontWeight.Bold).margin({top:20})// 当前进度（调试用）Text(`当前进度：${this.currentFocusSeconds}秒`).fontSize(14).fontColor('#999999').margin({top:10})// 控制按钮Row(){Button(this.isRunning?'暂停':'开始').backgroundColor('#FF6B6B').fontColor(Color.White).onClick(()=>this.toggleTimer())Button('重置').backgroundColor('#E0E0E0').fontColor('#333333').onClick(()=>this.resetTimer()).margin({left:20})}.margin({top:30})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}getProgress():number{consttotalTime=25*60;return((totalTime-this.timeLeft)/totalTime)*100;}formatTime(seconds:number):string{constmins=Math.floor(seconds/60);constsecs=seconds%60;return`${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;}toggleTimer(){if(this.isRunning){clearInterval(this.timerId);this.isRunning=false;}else{this.startTimer();}}startTimer(){this.isRunning=true;this.timerId=setInterval(()=>{if(this.timeLeft>0){this.timeLeft--;if(!this.isBreak){this.currentFocusSeconds++;if(this.currentFocusSeconds>=60){this.totalFocusMinutes++;this.currentFocusSeconds=0;}}}else{this.complete();}},1000);}complete(){clearInterval(this.timerId);this.isRunning=false;if(this.currentFocusSeconds>=30){this.totalFocusMinutes++;}this.currentFocusSeconds=0;}resetTimer(){clearInterval(this.timerId);this.isRunning=false;this.currentFocusSeconds=0;this.timeLeft=25*60;}}

四、效果对比

4.1 功能验证

4.2 数据流示意

┌─────────────────────────────────────┐ │ 实时累加流程 │ ├─────────────────────────────────────┤ │ 每秒触发 → currentFocusSeconds++ │ │ ↓ │ │ 满60秒? → totalFocusMinutes++ │ │ → currentFocusSeconds = 0 │ │ ↓ │ │ 完成/重置 → 处理剩余秒数 │ └─────────────────────────────────────┘

五、最佳实践

5.1 变量设计原则

// ✅ 正确：分离显示变量和计算变量@StatetotalFocusMinutes:number=0;// 显示用privatecurrentFocusSeconds:number=0;// 计算用// ❌ 错误：只用一个变量，无法精确控制@StatefocusSeconds:number=0;

5.2 边界条件处理

// ✅ 正确：处理不足单位时间的情况if(this.currentFocusSeconds>=30){this.totalFocusMinutes++;}// ❌ 错误：忽略剩余时间// 直接清零，丢失最后几十秒的专注成果

5.3 状态区分

// ✅ 正确：区分专注和休息if(!this.isBreak){this.currentFocusSeconds++;}// ❌ 错误：不区分状态this.currentFocusSeconds++;// 休息时间也会累加

六、总结

本文实现了专注时长的实时累加功能，核心是采用双变量设计：

• totalFocusMinutes：用于UI显示的总时长
• currentFocusSeconds：用于累加计算的秒数进度

同时需要注意处理边界条件（不足1分钟的部分）和区分不同状态（专注/休息），这样才能为用户提供准确的实时反馈。