及时做APP开发实战(十六)-专注完成弹窗提示

及时做APP开发实战(十六)-专注完成弹窗提示

本文将介绍如何实现专注完成和休息结束的弹窗提示功能，提升用户体验。

一、功能需求

1.1 需求分析

【图1：专注完成弹窗】

┌─────────────────────────────────────┐ │ 🍅 专注完成 │ ├─────────────────────────────────────┤ │ │ │ 太棒了！你完成了一个番茄钟！🎉 │ │ │ │ 本次专注：25分钟 │ │ 累计专注：50分钟 │ │ │ │ ┌─────────┐ ┌─────────┐ │ │ │开始休息 │ │ 关闭 │ │ │ └─────────┘ └─────────┘ │ └─────────────────────────────────────┘

1.2 功能点

二、AlertDialog详解

2.1 基本用法

【图2：休息结束弹窗】

AlertDialog.show({title:'标题',message:'内容',autoCancel:true,// 点击遮罩关闭alignment:DialogAlignment.Center,// 对齐方式primaryButton:{// 主按钮value:'按钮1',action:()=>{// 点击事件}},secondaryButton:{// 副按钮value:'按钮2',action:()=>{// 点击事件}},cancel:()=>{// 取消回调// 关闭事件}});

2.2 参数说明

2.3 对齐方式

DialogAlignment枚举： ┌─────────────────────────────────────┐ │ Top - 顶部对齐 │ │ Center - 居中对齐（默认） │ │ Bottom - 底部对齐 │ │ TopStart - 左上对齐 │ │ TopEnd - 右上对齐 │ │ CenterStart - 左中对齐 │ │ CenterEnd - 右中对齐 │ │ BottomStart - 左下对齐 │ │ BottomEnd - 右下对齐 │ └─────────────────────────────────────┘

三、实现方案

3.1 专注完成弹窗

// 显示专注完成弹窗privateshowPomodoroCompleteDialog(){// 鼓励语数组constmessages=['太棒了！你完成了一个番茄钟！🎉','做得好！保持专注，继续加油！💪','专注完成！休息一下吧~ ☕','又一个番茄钟完成！你真厉害！🌟','专注力满分！给自己点个赞！👍'];// 随机选择一条constrandomMessage=messages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:'🍅 专注完成',message:randomMessage+`\n\n本次专注：${this.customDuration}分钟\n累计专注：${this.totalFocusMinutes}分钟`,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:'开始休息',action:()=>{this.startBreak();}},secondaryButton:{value:'关闭',action:()=>{}}});}

3.2 休息结束弹窗

// 显示休息结束弹窗privateshowBreakEndDialog(){constmessages=['休息结束，准备好继续了吗？','充电完成！让我们继续加油！','休息好了吗？开始新的专注吧！','准备好迎接下一个挑战了吗？'];constrandomMessage=messages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:'☕ 休息结束',message:randomMessage,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:'开始专注',action:()=>{this.timeLeft=this.customDuration*60;}},secondaryButton:{value:'稍后再说',action:()=>{}}});}

3.3 开始休息方法

// 开始休息privatestartBreak(){this.isBreak=true;// 判断是否需要长休息if(this.pomodoroCount%Constants.POMODOROS_BEFORE_LONG_BREAK===0){this.timeLeft=Constants.LONG_BREAK_DURATION*60;}else{this.timeLeft=Constants.SHORT_BREAK_DURATION*60;}}

四、调用时机

4.1 番茄钟完成时

// 计时结束处理privateasynchandleTimerEnd(){if(this.isBreak){// 休息结束this.feedbackUtil.breakEnd();this.showBreakEndDialog();// ✅ 显示弹窗}else{// 番茄钟完成this.pomodoroCount++;// 保存记录...// 番茄钟完成反馈this.feedbackUtil.pomodoroComplete();// 显示专注完成弹窗this.showPomodoroCompleteDialog();// ✅ 显示弹窗}}

4.2 流程图

┌─────────────────────────────────────┐ │ 专注流程 │ ├─────────────────────────────────────┤ │ 1. 用户开始专注 │ │ ↓ │ │ 2. 倒计时结束 │ │ ↓ │ │ 3. 显示专注完成弹窗 │ │ ├─→ 点击"开始休息" → 开始休息倒计时 │ │ └─→ 点击"关闭" → 等待用户操作 │ │ ↓ │ │ 4. 休息倒计时结束 │ │ ↓ │ │ 5. 显示休息结束弹窗 │ │ ├─→ 点击"开始专注" → 开始新番茄钟 │ │ └─→ 点击"稍后再说" → 等待用户操作 │ └─────────────────────────────────────┘

五、用户体验优化

5.1 鼓励语设计

专注完成鼓励语： ┌─────────────────────────────────────┐ │ 🎉 太棒了！你完成了一个番茄钟！ │ │ 💪 做得好！保持专注，继续加油！ │ │ ☕ 专注完成！休息一下吧~ │ │ 🌟 又一个番茄钟完成！你真厉害！ │ │ 👍 专注力满分！给自己点个赞！ │ └─────────────────────────────────────┘ 休息结束提示语： ┌─────────────────────────────────────┐ │ 休息结束，准备好继续了吗？ │ │ 充电完成！让我们继续加油！ │ │ 休息好了吗？开始新的专注吧！ │ │ 准备好迎接下一个挑战了吗？ │ └─────────────────────────────────────┘

5.2 数据统计展示

// 弹窗内容包含统计数据message:randomMessage+`本次专注：${this.customDuration}分钟 累计专注：${this.totalFocusMinutes}分钟`

5.3 交互优化

┌─────────────────────────────────────┐ │ 交互优化 │ ├─────────────────────────────────────┤ │ □ autoCancel: true - 点击遮罩关闭 │ │ □ 主按钮突出显示 - 引导用户操作 │ │ □ 副按钮次要显示 - 提供退出选项 │ │ □ 随机鼓励语 - 增加趣味性 │ └─────────────────────────────────────┘

六、完整代码示例

6.1 弹窗方法

// 显示专注完成弹窗privateshowPomodoroCompleteDialog(){constmessages=['太棒了！你完成了一个番茄钟！🎉','做得好！保持专注，继续加油！💪','专注完成！休息一下吧~ ☕','又一个番茄钟完成！你真厉害！🌟','专注力满分！给自己点个赞！👍'];constrandomMessage=messages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:'🍅 专注完成',message:randomMessage+`\n\n本次专注：${this.customDuration}分钟\n累计专注：${this.totalFocusMinutes}分钟`,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:'开始休息',action:()=>{this.startBreak();}},secondaryButton:{value:'关闭',action:()=>{}}});}// 显示休息结束弹窗privateshowBreakEndDialog(){constmessages=['休息结束，准备好继续了吗？','充电完成！让我们继续加油！','休息好了吗？开始新的专注吧！','准备好迎接下一个挑战了吗？'];constrandomMessage=messages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:'☕ 休息结束',message:randomMessage,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:'开始专注',action:()=>{this.timeLeft=this.customDuration*60;}},secondaryButton:{value:'稍后再说',action:()=>{}}});}

七、总结

本文实现了专注完成和休息结束的弹窗提示功能，核心要点：

1. AlertDialog使用：标题、内容、按钮配置
2. 随机鼓励语：增加趣味性和激励效果
3. 数据统计：显示本次和累计专注时长
4. 交互优化：主副按钮引导用户操作