feat: 实现目标列表左滑删除功能及相关组件
- 在目标列表中添加左滑删除功能,用户可通过左滑手势显示删除按钮并确认删除目标 - 修改 GoalCard 组件,使用 Swipeable 组件包装卡片内容,支持删除操作 - 更新目标列表页面,集成删除目标的逻辑,确保与 Redux 状态管理一致 - 添加开发模式下的模拟数据,方便测试删除功能 - 更新相关文档,详细描述左滑删除功能的实现和使用方法
This commit is contained in:
131
docs/goal-swipe-delete-implementation.md
Normal file
131
docs/goal-swipe-delete-implementation.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# 目标列表左滑删除功能实现
|
||||
|
||||
## 功能概述
|
||||
|
||||
为目标列表的卡片添加了左滑删除功能,用户可以通过左滑手势显示删除按钮,点击后确认删除目标。
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 1. 依赖库
|
||||
- `react-native-gesture-handler`: 提供手势处理功能
|
||||
- `@expo/vector-icons`: 提供删除图标
|
||||
|
||||
### 2. 核心组件修改
|
||||
|
||||
#### GoalCard 组件 (`components/GoalCard.tsx`)
|
||||
- 使用 `Swipeable` 组件包装原有的卡片内容
|
||||
- 添加 `renderRightActions` 方法渲染删除按钮
|
||||
- 添加删除确认对话框
|
||||
- 支持删除回调函数
|
||||
|
||||
#### 应用根布局 (`app/_layout.tsx`)
|
||||
- 添加 `GestureHandlerRootView` 包装器
|
||||
- 确保手势处理功能正常工作
|
||||
|
||||
#### 目标列表页面 (`app/goals-list.tsx`)
|
||||
- 添加删除目标的处理逻辑
|
||||
- 集成 Redux 删除 action
|
||||
- 添加开发模式下的模拟数据用于测试
|
||||
|
||||
### 3. 功能特性
|
||||
|
||||
#### 左滑手势
|
||||
- 支持左滑显示删除按钮
|
||||
- 设置合适的滑动阈值和边界
|
||||
- 自动关闭滑动状态
|
||||
|
||||
#### 删除确认
|
||||
- 显示确认对话框
|
||||
- 包含目标标题信息
|
||||
- 提供取消和确认选项
|
||||
|
||||
#### 视觉反馈
|
||||
- 红色删除按钮背景
|
||||
- 删除图标和文字
|
||||
- 圆角设计保持一致性
|
||||
|
||||
#### 状态管理
|
||||
- 集成 Redux 删除 action
|
||||
- 自动更新列表状态
|
||||
- 错误处理和提示
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 用户操作流程
|
||||
1. 在目标列表中,向左滑动任意目标卡片
|
||||
2. 删除按钮会从右侧滑出
|
||||
3. 点击删除按钮
|
||||
4. 确认删除对话框出现
|
||||
5. 选择"删除"确认或"取消"放弃
|
||||
|
||||
### 开发测试
|
||||
在开发模式下,如果 API 调用失败,会自动加载模拟数据进行测试:
|
||||
- 每日运动30分钟
|
||||
- 每天喝8杯水
|
||||
- 每周读书2小时
|
||||
|
||||
## 代码结构
|
||||
|
||||
```typescript
|
||||
// GoalCard 组件结构
|
||||
<Swipeable
|
||||
ref={swipeableRef}
|
||||
renderRightActions={renderRightActions}
|
||||
rightThreshold={40}
|
||||
overshootRight={false}
|
||||
>
|
||||
<TouchableOpacity>
|
||||
{/* 原有的卡片内容 */}
|
||||
</TouchableOpacity>
|
||||
</Swipeable>
|
||||
```
|
||||
|
||||
## 样式设计
|
||||
|
||||
### 删除按钮样式
|
||||
```typescript
|
||||
deleteButton: {
|
||||
backgroundColor: '#EF4444',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 80,
|
||||
height: '100%',
|
||||
borderTopRightRadius: 16,
|
||||
borderBottomRightRadius: 16,
|
||||
marginBottom: 12,
|
||||
}
|
||||
```
|
||||
|
||||
### 删除按钮文字样式
|
||||
```typescript
|
||||
deleteButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginTop: 4,
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **手势处理**: 必须使用 `GestureHandlerRootView` 包装应用
|
||||
2. **类型安全**: 确保所有必要的字段都正确设置
|
||||
3. **错误处理**: 删除失败时显示错误提示
|
||||
4. **用户体验**: 提供确认对话框防止误删
|
||||
5. **性能优化**: 使用 `useRef` 管理 Swipeable 引用
|
||||
|
||||
## 扩展功能
|
||||
|
||||
可以考虑添加的其他功能:
|
||||
- 批量删除
|
||||
- 撤销删除
|
||||
- 删除动画效果
|
||||
- 更多操作按钮(编辑、暂停等)
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **手势测试**: 测试不同滑动距离和速度
|
||||
2. **边界测试**: 测试快速连续滑动
|
||||
3. **状态测试**: 测试删除后的列表更新
|
||||
4. **错误测试**: 测试网络错误时的处理
|
||||
5. **UI测试**: 测试不同屏幕尺寸下的显示效果
|
||||
Reference in New Issue
Block a user