social-app/docs/plans/2026-03-11-calendar-dayview-improvement-design.md

日视图改进设计

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;
• 添加缩放状态变量：

  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