鸿蒙flutter第三方库适配 - 时间线应用

时间线应用

欢迎加入开源鸿蒙跨平台社区：

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 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

TimelineHomePage
侧边面板
主内容区
搜索框
视图切换
类型筛选
迷你日历
统计卡片
垂直时间线
水平时间线
日历视图
事件管理器

EventManager
过滤引擎

FilterEngine
日历导航

CalendarNavigator
TimelineEvent

事件模型
EventType

事件类型
TimelineView

视图模式

2.2 类图设计

manages
has
uses
TimelineApp
+Widget build()
<<enumeration>>
EventType
+String label
+IconData icon
+Color color
+milestone()
+task()
+meeting()
+travel()
+birthday()
+anniversary()
+achievement()
+note()
<<enumeration>>
TimelineView
+String label
+vertical()
+horizontal()
+calendar()
TimelineEvent
+String id
+String title
+String? description
+DateTime dateTime
+EventType type
+bool isCompleted
+List<String> tags
+String? location
+String? imageUrl
+dateStr
+timeStr
+copyWith()
TimelineHomePage
-List<TimelineEvent> _events
-List<TimelineEvent> _filteredEvents
-String _searchQuery
-TimelineView _currentView
-EventType? _selectedType
-DateTime? _selectedDate
-DateTime _focusedMonth
+filterEvents()
+addEvent()
+deleteEvent()
+toggleEventComplete()
+jumpToDate()

2.3 页面导航流程

垂直时间线
水平时间线
日历视图
标记完成
删除事件
关闭
应用启动
主页面
选择视图
垂直时间线视图
水平时间线视图
日历视图
浏览事件列表
水平滚动浏览
日历网格浏览
点击事件卡片
查看事件详情
操作选择
更新事件状态
移除事件
点击添加按钮
添加事件弹窗
填写事件信息
保存事件

2.4 事件操作流程

过滤引擎事件管理主页面用户过滤引擎事件管理主页面用户搜索事件应用搜索条件获取匹配事件返回过滤结果显示搜索结果添加新事件创建事件保存事件更新事件列表显示新事件标记完成更新状态修改事件返回更新结果显示完成状态

三、核心模块设计

3.1 数据模型设计

3.1.1 事件类型枚举 (EventType)

dart 复制代码

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)

dart 复制代码

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

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

3.1.3 事件数据模型 (TimelineEvent)

dart 复制代码

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 事件类型分布

35% 25% 15% 10% 5% 5% 3% 2% 事件类型分布示例任务会议里程碑旅行生日纪念日成就笔记

3.2 页面结构设计

3.2.1 主页面布局

TimelineHomePage
Row布局
侧边面板 280px
VerticalDivider
主内容区 Expanded
应用标题
搜索框
视图切换
类型筛选
迷你日历
统计卡片
顶部工具栏
时间线视图

3.2.2 侧边面板结构

侧边面板
标题区域
搜索区域
视图选择
类型筛选
日历导航
统计概览
应用Logo
应用名称
垂直时间线
水平时间线
日历视图
全部类型
类型列表
月份切换
日历网格
今天按钮

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 性能优化建议

性能优化
列表优化
渲染优化
内存优化
使用builder构造
实现itemExtent
添加缓存区域
避免重复绘制
使用const组件
优化图片加载
及时释放资源
控制状态范围
使用轻量模型

五、开发计划

5.1 开发周期

2024-01-01 2024-01-03 2024-01-05 2024-01-07 2024-01-09 2024-01-11 2024-01-13 2024-01-15 2024-01-17 2024-01-19 项目初始化数据模型设计基础页面搭建侧边面板开发垂直时间线水平时间线日历视图事件管理搜索过滤日历导航动画效果性能优化测试与修复基础框架核心功能交互功能完善优化时间线应用开发计划

5.2 功能清单

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

六、使用说明

6.1 运行方式

bash 复制代码

# 进入项目目录
cd flutter_harmonyos

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

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

6.2 操作说明

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

6.3 注意事项

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

七、总结

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

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