richarjiang
75806df660
- 将目标创建成功后的提示从系统默认的 Alert.alert 改为使用自定义确认弹窗，提升用户体验和视觉一致性 - 在任务筛选中新增“已跳过”选项，支持用户更好地管理任务状态 - 更新任务卡片和进度卡片，展示跳过任务的数量和状态 - 调整相关组件样式，确保界面一致性和美观性 - 编写相关文档，详细描述新功能和使用方法
176 lines
3.3 KiB
Markdown
176 lines
3.3 KiB
Markdown
# 确认弹窗取消按钮控制功能
|
|
|
|
## 功能概述
|
|
|
|
ConfirmDialog 组件现在支持控制是否显示取消按钮，通过设置 `cancelText` 参数来控制。
|
|
|
|
## 实现原理
|
|
|
|
### 1. 条件渲染逻辑
|
|
|
|
在 ConfirmDialog 组件中，取消按钮的显示基于 `cancelText` 参数：
|
|
|
|
```typescript
|
|
{cancelText && (
|
|
<TouchableOpacity
|
|
style={[styles.button, styles.cancelButton]}
|
|
onPress={handleCancel}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.cancelButtonText}>{cancelText}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
```
|
|
|
|
### 2. 样式适配
|
|
|
|
根据是否显示取消按钮，动态调整按钮容器的样式：
|
|
|
|
```typescript
|
|
<View style={[
|
|
styles.buttonContainer,
|
|
!cancelText && styles.singleButtonContainer
|
|
]}>
|
|
```
|
|
|
|
### 3. 确认按钮样式
|
|
|
|
当只有确认按钮时，应用特殊样式：
|
|
|
|
```typescript
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.button,
|
|
styles.confirmButton,
|
|
{ backgroundColor: confirmButtonColor },
|
|
!cancelText && styles.singleConfirmButton,
|
|
]}
|
|
onPress={handleConfirm}
|
|
activeOpacity={0.7}
|
|
>
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
### 显示双按钮（默认行为）
|
|
|
|
```typescript
|
|
showConfirm(
|
|
{
|
|
title: '确认操作',
|
|
message: '确定要执行此操作吗？',
|
|
confirmText: '确定',
|
|
cancelText: '取消', // 设置取消按钮文本
|
|
icon: 'warning',
|
|
iconColor: '#F59E0B',
|
|
},
|
|
() => {
|
|
// 确认回调
|
|
}
|
|
);
|
|
```
|
|
|
|
### 只显示确认按钮
|
|
|
|
```typescript
|
|
showConfirm(
|
|
{
|
|
title: '目标创建成功',
|
|
message: '恭喜！您的目标已成功创建。',
|
|
confirmText: '确定',
|
|
cancelText: '', // 空字符串或不设置
|
|
icon: 'checkmark-circle',
|
|
iconColor: '#10B981',
|
|
},
|
|
() => {
|
|
// 确认回调
|
|
}
|
|
);
|
|
```
|
|
|
|
### 完全不显示取消按钮
|
|
|
|
```typescript
|
|
showConfirm(
|
|
{
|
|
title: '操作成功',
|
|
message: '操作已完成',
|
|
confirmText: '确定',
|
|
// 不设置 cancelText 或设置为 undefined
|
|
icon: 'checkmark-circle',
|
|
iconColor: '#10B981',
|
|
},
|
|
() => {
|
|
// 确认回调
|
|
}
|
|
);
|
|
```
|
|
|
|
## 样式变化
|
|
|
|
### 双按钮布局
|
|
- 两个按钮并排显示
|
|
- 按钮之间有 12px 间距
|
|
- 每个按钮占据 50% 宽度
|
|
|
|
### 单按钮布局
|
|
- 只显示确认按钮
|
|
- 按钮占据 100% 宽度
|
|
- 无按钮间距
|
|
|
|
## 应用场景
|
|
|
|
### 1. 成功提示（单按钮）
|
|
- 目标创建成功
|
|
- 操作完成提示
|
|
- 信息确认
|
|
|
|
### 2. 确认操作（双按钮）
|
|
- 删除确认
|
|
- 跳过任务确认
|
|
- 重要操作确认
|
|
|
|
### 3. 警告提示（双按钮）
|
|
- 危险操作确认
|
|
- 数据丢失警告
|
|
- 权限确认
|
|
|
|
## 技术细节
|
|
|
|
### 接口定义
|
|
|
|
```typescript
|
|
export interface DialogConfig {
|
|
title: string;
|
|
message?: string;
|
|
confirmText?: string;
|
|
cancelText?: string; // 可选参数，控制取消按钮显示
|
|
destructive?: boolean;
|
|
icon?: keyof typeof Ionicons.glyphMap;
|
|
iconColor?: string;
|
|
}
|
|
```
|
|
|
|
### 样式类
|
|
|
|
```typescript
|
|
buttonContainer: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
width: '100%',
|
|
},
|
|
singleButtonContainer: {
|
|
gap: 0, // 单按钮时移除间距
|
|
},
|
|
singleConfirmButton: {
|
|
flex: 1, // 单按钮时占满宽度
|
|
},
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. **空字符串 vs undefined**：两者都会隐藏取消按钮
|
|
2. **按钮文本**：建议为取消按钮提供有意义的文本
|
|
3. **用户体验**：单按钮适合成功提示，双按钮适合需要确认的操作
|
|
4. **无障碍访问**：确保按钮有足够的点击区域和清晰的文本
|