48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
|
# 日视图改进设计
|
|||
|
|
|
|||
|
|
**Date:** 2026-03-11
|
|||
|
|
**Status:** 已确认
|
|||
|
|
|
|||
|
|
## 需求概述
|
|||
|
|
|
|||
|
|
对日历日视图进行三项改进：
|
|||
|
|
1. 固定顶部头部
|
|||
|
|
2. 添加「今天」快捷按钮
|
|||
|
|
3. 双指缩放时间轴高度
|
|||
|
|
|
|||
|
|
## 设计方案
|
|||
|
|
|
|||
|
|
### 1. 固定顶部头部
|
|||
|
|
|
|||
|
|
使用 `Stack` + `Positioned` 布局：
|
|||
|
|
- 外层 `Stack` 包含头部和可滚动内容
|
|||
|
|
- 头部使用 `Positioned` 固定在顶部 `top: 0`
|
|||
|
|
- 时间轴内容使用 `SingleChildScrollView` 可滚动
|
|||
|
|
- 头部高度：68px
|
|||
|
|
|
|||
|
|
### 2. 「今天」按钮
|
|||
|
|
|
|||
|
|
- **位置**：+ 号按钮左侧（`const Spacer()` 在返回和日期之间，+号和今天按钮靠近）
|
|||
|
|
- **样式**：
|
|||
|
|
- 圆角按钮（`BorderRadius.circular(AppRadius.xl)`）
|
|||
|
|
- 背景：`AppColors.messageBtnWrap`
|
|||
|
|
- 文字：黑色，「今天」
|
|||
|
|
- **显示条件**：只有当 `_selectedDate` 不是今天时显示
|
|||
|
|
- **点击行为**：调用 `_goToToday()` 跳转到今天
|
|||
|
|
|
|||
|
|
### 3. 双指缩放时间轴高度
|
|||
|
|
|
|||
|
|
使用 `GestureDetector` 监听缩放手势：
|
|||
|
|
- `_hourHeight` 从 `const` 改为变量 `double _hourHeight = 34.0;`
|
|||
|
|
- 添加缩放状态变量：
|
|||
|
|
```dart
|
|||
|
|
double _baseHourHeight = 34.0;
|
|||
|
|
double _currentScale = 1.0;
|
|||
|
|
```
|
|||
|
|
- 缩放范围：0.5x ~ 2.0x（17px ~ 68px/小时）
|
|||
|
|
- 在 `_buildTimelineBoard()` 中使用 `_hourHeight` 动态计算高度
|
|||
|
|
|
|||
|
|
## 实现计划
|
|||
|
|
|
|||
|
|
见 `docs/plans/2026-03-11-calendar-dayview-improvement-impl.md`
|