及时做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 专注完成弹窗

// 显示专注完成弹窗
private showPomodoroCompleteDialog() {
// 鼓励语数组
const messages = [
'太棒了！你完成了一个番茄钟！🎉',
'做得好！保持专注，继续加油！💪',
'专注完成！休息一下吧~ ☕',
'又一个番茄钟完成！你真厉害！🌟',
'专注力满分！给自己点个赞！👍'
];

// 随机选择一条
const randomMessage = 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 休息结束弹窗

// 显示休息结束弹窗
private showBreakEndDialog() {
const messages = [
'休息结束，准备好继续了吗？',
'充电完成！让我们继续加油！',
'休息好了吗？开始新的专注吧！',
'准备好迎接下一个挑战了吗？'
];
const randomMessage = 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 开始休息方法

// 开始休息
private startBreak() {
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 番茄钟完成时

// 计时结束处理
private async handleTimerEnd() {
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 弹窗方法

// 显示专注完成弹窗
private showPomodoroCompleteDialog() {
const messages = [
'太棒了！你完成了一个番茄钟！🎉',
'做得好！保持专注，继续加油！💪',
'专注完成！休息一下吧~ ☕',
'又一个番茄钟完成！你真厉害！🌟',
'专注力满分！给自己点个赞！👍'
];
const randomMessage = 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: () => {}
}
});
}

// 显示休息结束弹窗
private showBreakEndDialog() {
const messages = [
'休息结束，准备好继续了吗？',
'充电完成！让我们继续加油！',
'休息好了吗？开始新的专注吧！',
'准备好迎接下一个挑战了吗？'
];
const randomMessage = 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: () => {}
}
});
}

七、总结

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