及时做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 参数说明参数类型说明titlestring弹窗标题messagestring弹窗内容autoCancelboolean点击遮罩是否关闭alignmentDialogAlignment对齐方式primaryButtonButton主按钮右侧secondaryButtonButton副按钮左侧cancel() void取消回调2.3 对齐方式DialogAlignment枚举 ┌─────────────────────────────────────┐ │ Top - 顶部对齐 │ │ Center - 居中对齐默认 │ │ Bottom - 底部对齐 │ │ TopStart - 左上对齐 │ │ TopEnd - 右上对齐 │ │ CenterStart - 左中对齐 │ │ CenterEnd - 右中对齐 │ │ BottomStart - 左下对齐 │ │ BottomEnd - 右下对齐 │ └─────────────────────────────────────┘三、实现方案3.1 专注完成弹窗// 显示专注完成弹窗privateshowPomodoroCompleteDialog(){// 鼓励语数组constmessages[太棒了你完成了一个番茄钟,做得好保持专注继续加油,专注完成休息一下吧~ ☕,又一个番茄钟完成你真厉害,专注力满分给自己点个赞];// 随机选择一条constrandomMessagemessages[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[休息结束准备好继续了吗,充电完成让我们继续加油,休息好了吗开始新的专注吧,准备好迎接下一个挑战了吗];constrandomMessagemessages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:☕ 休息结束,message:randomMessage,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:开始专注,action:(){this.timeLeftthis.customDuration*60;}},secondaryButton:{value:稍后再说,action:(){}}});}3.3 开始休息方法// 开始休息privatestartBreak(){this.isBreaktrue;// 判断是否需要长休息if(this.pomodoroCount%Constants.POMODOROS_BEFORE_LONG_BREAK0){this.timeLeftConstants.LONG_BREAK_DURATION*60;}else{this.timeLeftConstants.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[太棒了你完成了一个番茄钟,做得好保持专注继续加油,专注完成休息一下吧~ ☕,又一个番茄钟完成你真厉害,专注力满分给自己点个赞];constrandomMessagemessages[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[休息结束准备好继续了吗,充电完成让我们继续加油,休息好了吗开始新的专注吧,准备好迎接下一个挑战了吗];constrandomMessagemessages[Math.floor(Math.random()*messages.length)];AlertDialog.show({title:☕ 休息结束,message:randomMessage,autoCancel:true,alignment:DialogAlignment.Center,primaryButton:{value:开始专注,action:(){this.timeLeftthis.customDuration*60;}},secondaryButton:{value:稍后再说,action:(){}}});}七、总结本文实现了专注完成和休息结束的弹窗提示功能核心要点AlertDialog使用标题、内容、按钮配置随机鼓励语增加趣味性和激励效果数据统计显示本次和累计专注时长交互优化主副按钮引导用户操作