时间线应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• two_dimensional_scrollables: https://pub.dev/packages/two_dimensional_scrollables
• shared_preferences: https://pub.dev/packages/shared_preferences
• animations: https://pub.dev/packages/animations
• file_selector: https://pub.dev/packages/file_selector

一、项目概述

运行效果图

1.1 应用简介

时间线应用是一款专业的事件管理与时间规划工具，帮助用户以可视化的方式记录和追踪生活中的重要事件。通过多种视图模式（垂直时间线、水平时间线、日历视图），用户可以灵活地浏览和管理自己的时间安排。应用支持事件分类、标签管理、搜索过滤等功能，让时间管理变得井井有条。

应用以清新的青色为主色调，象征时间与效率。涵盖时间线展示、事件管理、日历导航、搜索过滤四大核心模块。用户可以创建各类事件、设置事件类型、添加标签和地点，通过直观的时间线界面追踪事件进度。

1.2 核心功能

功能模块	功能描述	实现方式
时间线展示	多种视图展示事件时间线	自定义绘制
事件管理	创建、编辑、删除事件	状态管理
事件分类	8种事件类型分类	枚举定义
日历导航	迷你日历快速跳转	日历组件
搜索过滤	按关键词和类型搜索	过滤算法
事件完成	标记事件完成状态	状态更新
标签系统	为事件添加标签分类	标签管理
导入导出	事件的导入导出功能	文件操作

1.3 事件类型定义

序号	类型名称	Emoji	图标	颜色	描述
1	里程碑	🚩	flag	红色	重要节点事件
2	任务	✅	task	蓝色	待办任务事项
3	会议	👥	people	绿色	会议安排记录
4	旅行	✈️	flight	橙色	出行计划记录
5	生日	🎂	cake	粉色	生日纪念提醒
6	纪念日	❤️	favorite	紫色	特殊纪念日期
7	成就	🏆	emoji_events	金色	成就达成记录
8	笔记	📝	note	灰色	备忘笔记记录

1.4 视图模式定义

序号	视图名称	Emoji	描述	适用场景
1	垂直时间线	📋	垂直滚动展示事件	详细浏览
2	水平时间线	📊	水平滚动展示事件	快速预览
3	日历视图	📅	日历网格展示事件	日期定位

1.5 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	StatefulWidget	-
数据存储	SharedPreferences	>= 2.0.0
动画效果	AnimationController	-
目标平台	鸿蒙OS / Web	API 21+

1.6 项目结构

lib/
└── main_timeline.dart
    ├── TimelineApp                        # 应用入口
    ├── EventType                          # 事件类型枚举
    ├── TimelineView                       # 视图模式枚举
    ├── TimelineEvent                      # 事件数据模型
    ├── TimelineHomePage                   # 主页面
    ├── _buildSidePanel                    # 侧边面板
    ├── _buildMiniCalendar                 # 迷你日历
    ├── _buildMainContent                  # 主内容区
    ├── _buildVerticalTimeline             # 垂直时间线
    ├── _buildHorizontalTimeline           # 水平时间线
    ├── _buildCalendarView                 # 日历视图
    ├── _buildEventCard                    # 事件卡片
    └── _showEventDetail                   # 事件详情弹窗

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 事件操作流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 事件类型枚举 (EventType)

enum EventType {
  milestone('里程碑', Icons.flag, Colors.red),
  task('任务', Icons.task, Colors.blue),
  meeting('会议', Icons.people, Colors.green),
  travel('旅行', Icons.flight, Colors.orange),
  birthday('生日', Icons.cake, Colors.pink),
  anniversary('纪念日', Icons.favorite, Colors.purple),
  achievement('成就', Icons.emoji_events, Colors.amber),
  note('笔记', Icons.note, Colors.grey);

  final String label;
  final IconData icon;
  final Color color;
  const EventType(this.label, this.icon, this.color);
}

3.1.2 视图模式枚举 (TimelineView)

enum TimelineView {
  vertical('垂直时间线'),
  horizontal('水平时间线'),
  calendar('日历视图');

  final String label;
  const TimelineView(this.label);
}

3.1.3 事件数据模型 (TimelineEvent)

class TimelineEvent {
  final String id;
  final String title;
  final String? description;
  final DateTime dateTime;
  final EventType type;
  final bool isCompleted;
  final List<String> tags;
  final String? location;
  final String? imageUrl;

  const TimelineEvent({
    required this.id,
    required this.title,
    this.description,
    required this.dateTime,
    required this.type,
    required this.isCompleted,
    this.tags = const [],
    this.location,
    this.imageUrl,
  });

  TimelineEvent copyWith({
    String? title,
    String? description,
    DateTime? dateTime,
    EventType? type,
    bool? isCompleted,
    List<String>? tags,
    String? location,
  }) {
    return TimelineEvent(
      id: id,
      title: title ?? this.title,
      description: description ?? this.description,
      dateTime: dateTime ?? this.dateTime,
      type: type ?? this.type,
      isCompleted: isCompleted ?? this.isCompleted,
      tags: tags ?? this.tags,
      location: location ?? this.location,
      imageUrl: imageUrl,
    );
  }

  String get dateStr {
    return '${dateTime.year}-${dateTime.month.toString().padLeft(2, '0')}-${dateTime.day.toString().padLeft(2, '0')}';
  }

  String get timeStr {
    return '${dateTime.hour.toString().padLeft(2, '0')}:${dateTime.minute.toString().padLeft(2, '0')}';
  }
}

3.1.4 事件类型分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 侧边面板结构

3.2.3 垂直时间线结构

3.2.4 水平时间线结构

3.3 事件过滤逻辑

3.4 日历导航逻辑

---

四、鸿蒙Flutter适配说明

4.1 适配要点

适配项	说明	处理方式
屏幕适配	支持不同屏幕尺寸	使用Row布局自适应
主题适配	支持深色模式	配置darkTheme
触控交互	适配触控操作	使用InkWell组件
滚动性能	优化滚动体验	使用ListView.builder
动画效果	流畅的过渡动画	AnimationController

4.2 第三方库替代方案

原库	功能	鸿蒙替代方案
two_dimensional_scrollables	二维滚动	自定义CustomScrollView
shared_preferences	数据存储	鸿蒙Preferences
animations	动画效果	AnimationController
file_selector	文件选择	鸿蒙FilePicker

4.3 性能优化建议

---

五、开发计划

5.1 开发周期

5.2 功能清单

序号	功能模块	优先级	状态
1	事件类型定义	高	✅ 已完成
2	事件数据模型	高	✅ 已完成
3	侧边面板布局	高	✅ 已完成
4	垂直时间线视图	高	✅ 已完成
5	水平时间线视图	中	✅ 已完成
6	日历视图	中	✅ 已完成
7	事件搜索过滤	高	✅ 已完成
8	事件添加功能	高	✅ 已完成
9	事件详情展示	高	✅ 已完成
10	事件完成标记	中	✅ 已完成
11	迷你日历导航	中	✅ 已完成
12	统计概览	低	✅ 已完成

---

六、使用说明

6.1 运行方式

# 进入项目目录
cd flutter_harmonyos

# 运行应用
flutter run -d harmonyos lib/main_timeline.dart

# 或指定设备运行
flutter run -d <device_id> lib/main_timeline.dart

6.2 操作说明

操作	说明
搜索事件	在侧边面板搜索框输入关键词
切换视图	点击视图模式选择按钮
筛选类型	点击事件类型筛选按钮
日历导航	点击迷你日历日期跳转
添加事件	点击右下角浮动按钮
查看详情	点击事件卡片
标记完成	点击事件卡片复选框
删除事件	在详情弹窗点击删除

6.3 注意事项

1. 本应用使用模拟数据演示功能
2. 实际项目中需接入数据持久化存储
3. 导入导出功能需要实现文件操作逻辑
4. 建议在鸿蒙设备上进行真机测试

---

七、总结

时间线应用通过清晰的视觉设计和直观的交互方式，为用户提供了高效的时间管理工具。应用支持多种视图模式，满足不同场景下的浏览需求；完善的事件分类和标签系统，帮助用户更好地组织和管理事件；日历导航功能让用户可以快速定位到特定日期的事件。

通过鸿蒙Flutter的跨平台能力，该应用可以轻松适配鸿蒙OS和其他平台，为用户提供一致的使用体验。后续可以进一步扩展数据同步、团队协作、提醒通知等功能，打造更加完善的时间管理解决方案。