77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
|
# 摇卦页面日期时间选择器优化设计
|
|||
|
|
|
|||
|
|
## 1. 现状问题
|
|||
|
|
|
|||
|
|
1. **硬编码日期格式**：`DateFormat('yyyy年MM月dd日 HH:mm')` 在3处硬编码，未做 l10n
|
|||
|
|
- `auto_divination_screen.dart:353`
|
|||
|
|
- `manual_divination_screen.dart:271`
|
|||
|
|
- `divination_result_screen.dart:455`
|
|||
|
|
|
|||
|
|
2. **原生 picker 样式简陋**：使用 Material `showDatePicker` + `showTimePicker`，交互体验差
|
|||
|
|
|
|||
|
|
## 2. 优化方案
|
|||
|
|
|
|||
|
|
### 2.1 自定义底部弹层时间选择器
|
|||
|
|
|
|||
|
|
- 使用 `CupertinoDatePicker`（iOS 滚轮样式）替代原生 Material picker
|
|||
|
|
- 底部弹层，带半透明遮罩和圆角动画
|
|||
|
|
- 日期/时间在同一个 picker 内通过 SegmentedControl 切换
|
|||
|
|
|
|||
|
|
### 2.2 Locale-aware 日期格式化
|
|||
|
|
|
|||
|
|
使用 `intl` 包实现：
|
|||
|
|
- 中文 locale：`DateFormat.yMd('zh_CN').add_Hm()` → `2026年4月3日 14:30`
|
|||
|
|
- 英文 locale：`DateFormat.yMd('en').add_Hm()` → `4/3/2026 14:30`
|
|||
|
|
|
|||
|
|
### 2.3 新增 l10n 键值
|
|||
|
|
|
|||
|
|
已有键值：
|
|||
|
|
- `autoSelectTime`: "选择起卦时间" / "Select time"
|
|||
|
|
- `manualSelectTime`: "选择起卦时间" / "Select time"
|
|||
|
|
- `divinationModify`: "修改" / "Modify"
|
|||
|
|
|
|||
|
|
无需新增键值，日期格式完全由 `intl` 包根据 locale 自动处理。
|
|||
|
|
|
|||
|
|
## 3. 组件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
apps/lib/shared/widgets/
|
|||
|
|
└── date_time_picker/
|
|||
|
|
└── date_time_picker_bottom_sheet.dart # 弹层容器
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**DateTimePickerBottomSheet** 接口：
|
|||
|
|
```dart
|
|||
|
|
Future<DateTime?> showDateTimePickerBottomSheet({
|
|||
|
|
required BuildContext context,
|
|||
|
|
required DateTime initialDateTime,
|
|||
|
|
DateTime? minDateTime,
|
|||
|
|
DateTime? maxDateTime,
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. 交互流程
|
|||
|
|
|
|||
|
|
1. 用户点击"修改"按钮
|
|||
|
|
2. 底部弹出 `DateTimePickerBottomSheet`
|
|||
|
|
3. SegmentedControl 切换"日期"/"时间"tab
|
|||
|
|
4. Cupertino 滚轮选择值
|
|||
|
|
5. 点击"确认"关闭弹层并更新状态
|
|||
|
|
|
|||
|
|
## 5. 涉及的改动文件
|
|||
|
|
|
|||
|
|
### 新建
|
|||
|
|
- `apps/lib/shared/widgets/date_time_picker/date_time_picker_bottom_sheet.dart`
|
|||
|
|
|
|||
|
|
### 修改
|
|||
|
|
- `apps/lib/features/divination/presentation/screens/auto_divination_screen.dart`
|
|||
|
|
- `apps/lib/features/divination/presentation/screens/manual_divination_screen.dart`
|
|||
|
|
- `apps/lib/features/divination/presentation/screens/divination_result_screen.dart`
|
|||
|
|
|
|||
|
|
## 6. 验收标准
|
|||
|
|
|
|||
|
|
1. 日期格式跟随系统语言：中文环境显示中文格式，英文环境显示英文格式
|
|||
|
|
2. 选择器使用 iOS 滚轮样式
|
|||
|
|
3. 底部弹层带遮罩动画
|
|||
|
|
4. 原硬编码格式完全移除
|