Flutter 框架跨平台鸿蒙开发 - 存档系统
运行效果图存档系统是一款将游戏存档概念引入真实生活的创新应用。在游戏中,我们可以在关键时刻保存进度,以便日后回溯或重新体验。存档系统将这一机制移植到现实生活中,让用户可以保存某个时刻的心情、状态、感受和事件,形成人生的"存档点"。当用户想要回顾过去某个时刻的心境,或者对比不同时期的状态变化时,可以随时"读取存档",重新体验那个时刻的感受。应用以时间轴的形式展示所有存档,让用户清晰地看到自己的人生轨
·
存档系统应用
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
存档系统是一款将游戏存档概念引入真实生活的创新应用。在游戏中,我们可以在关键时刻保存进度,以便日后回溯或重新体验。存档系统将这一机制移植到现实生活中,让用户可以保存某个时刻的心情、状态、感受和事件,形成人生的"存档点"。
当用户想要回顾过去某个时刻的心境,或者对比不同时期的状态变化时,可以随时"读取存档",重新体验那个时刻的感受。应用以时间轴的形式展示所有存档,让用户清晰地看到自己的人生轨迹。
1.2 核心理念
人生如游戏,每个重要时刻都值得被保存。存档系统的设计理念基于以下原则:
| 设计原则 | 理论基础 | 应用体现 |
|---|---|---|
| 时刻保存 | 记忆心理学 | 记录关键时刻的完整状态 |
| 情绪回溯 | 情绪记忆理论 | 重现当时的心情感受 |
| 状态对比 | 自我差异理论 | 对比不同时期的状态变化 |
| 人生轨迹 | 生命历程理论 | 时间轴展示人生进程 |
1.3 核心功能
1.4 心情类型分类
应用支持多种心情类型:
| 类型 | 图标 | 颜色 | 描述 | 典型场景 |
|---|---|---|---|---|
| 极度开心 | 🎉 | #FFD700 | 无比兴奋和快乐 | 升职、结婚、中奖 |
| 开心 | 😊 | #4CAF50 | 心情愉悦舒畅 | 朋友聚会、收到礼物 |
| 平静 | 😌 | #2196F3 | 内心平和安宁 | 独处阅读、散步 |
| 思考 | 🤔 | #9C27B0 | 深度思考状态 | 人生抉择、学习 |
| 疲惫 | 😫 | #607D8B | 身心俱疲 | 加班、失眠 |
| 焦虑 | 😰 | #FF9800 | 内心不安担忧 | 考试、面试 |
| 难过 | 😢 | #3F51B5 | 心情低落沮丧 | 失败、离别 |
| 愤怒 | 😠 | #F44336 | 情绪激动愤怒 | 被误解、不公 |
1.5 存档槽位系统
| 槽位类型 | 图标 | 容量 | 描述 |
|---|---|---|---|
| 自动存档 | 🔄 | 30个 | 系统自动记录每日状态 |
| 快速存档 | ⚡ | 10个 | 一键快速记录当前状态 |
| 重要存档 | ⭐ | 20个 | 人生重要时刻永久保存 |
| 临时存档 | 📝 | 5个 | 临时状态记录 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_save_system.dart
├── SaveSystemApp # 应用入口
├── MoodType # 心情类型枚举
├── SaveSlot # 存档槽位枚举
├── LifeSave # 存档模型
├── EnvironmentInfo # 环境信息模型
├── SaveSystemPage # 主页面(底部导航)
├── _buildTimelineView # 时间轴视图
├── _buildCreateSaveView # 创建存档页面
└── _buildStatisticsView # 统计页面
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 存档创建流程
渲染错误: Mermaid 渲染失败: Parse error on line 4: ...cipant 创建页 心情选择器 participant 存档管 ----------------------^ Expecting '()', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'SOLID_ARROW_TOP', 'SOLID_ARROW_BOTTOM', 'STICK_ARROW_TOP', 'STICK_ARROW_BOTTOM', 'SOLID_ARROW_TOP_DOTTED', 'SOLID_ARROW_BOTTOM_DOTTED', 'STICK_ARROW_TOP_DOTTED', 'STICK_ARROW_BOTTOM_DOTTED', 'SOLID_ARROW_TOP_REVERSE', 'SOLID_ARROW_BOTTOM_REVERSE', 'STICK_ARROW_TOP_REVERSE', 'STICK_ARROW_BOTTOM_REVERSE', 'SOLID_ARROW_TOP_REVERSE_DOTTED', 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED', 'STICK_ARROW_TOP_REVERSE_DOTTED', 'STICK_ARROW_BOTTOM_REVERSE_DOTTED', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'
2.4 回溯体验流程
三、核心模块设计
3.1 数据模型设计
3.1.1 心情类型枚举 (MoodType)
enum MoodType {
extremelyHappy('极度开心', '🎉', Color(0xFFFFD700), '无比兴奋和快乐'),
happy('开心', '😊', Color(0xFF4CAF50), '心情愉悦舒畅'),
calm('平静', '😌', Color(0xFF2196F3), '内心平和安宁'),
thinking('思考', '🤔', Color(0xFF9C27B0), '深度思考状态'),
tired('疲惫', '😫', Color(0xFF607D8B), '身心俱疲'),
anxious('焦虑', '😰', Color(0xFFFF9800), '内心不安担忧'),
sad('难过', '😢', Color(0xFF3F51B5), '心情低落沮丧'),
angry('愤怒', '😠', Color(0xFFF44336), '情绪激动愤怒');
final String label;
final String icon;
final Color color;
final String description;
}
3.1.2 存档槽位枚举 (SaveSlot)
enum SaveSlot {
auto('自动存档', '🔄', 30),
quick('快速存档', '⚡', 10),
important('重要存档', '⭐', 20),
temporary('临时存档', '📝', 5);
final String label;
final String icon;
final int maxCount;
}
3.1.3 存档模型 (LifeSave)
class LifeSave {
final String id; // 唯一标识
String title; // 存档标题
MoodType moodType; // 心情类型
int moodScore; // 心情分数(0-100)
String description; // 存档描述
final DateTime createdAt; // 创建时间
SaveSlot slotType; // 存档槽位
List<String> tags; // 状态标签
EnvironmentInfo environment; // 环境信息
List<String> thoughts; // 当时想法
String? location; // 位置
bool isImportant; // 是否重要
}
3.1.4 环境信息模型 (EnvironmentInfo)
class EnvironmentInfo {
final String? weather; // 天气
final String? temperature; // 温度
final String? season; // 季节
final String? timeOfDay; // 时段
static EnvironmentInfo getCurrent() {
// 根据当前时间自动获取环境信息
}
}
3.1.5 心情分布统计
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 时间轴视图结构
3.2.3 创建存档页面结构
3.3 心情趋势算法
3.4 环境信息获取
class EnvironmentInfo {
static EnvironmentInfo getCurrent() {
final now = DateTime.now();
final hour = now.hour;
final month = now.month;
String timeOfDay;
if (hour >= 5 && hour < 12) {
timeOfDay = '早晨';
} else if (hour >= 12 && hour < 14) {
timeOfDay = '中午';
} else if (hour >= 14 && hour < 18) {
timeOfDay = '下午';
} else if (hour >= 18 && hour < 22) {
timeOfDay = '晚上';
} else {
timeOfDay = '深夜';
}
String season;
if (month >= 3 && month <= 5) {
season = '春季';
} else if (month >= 6 && month <= 8) {
season = '夏季';
} else if (month >= 9 && month <= 11) {
season = '秋季';
} else {
season = '冬季';
}
return EnvironmentInfo(
weather: '晴',
temperature: '${15 + Random().nextInt(15)}°C',
season: season,
timeOfDay: timeOfDay,
);
}
}
四、UI设计规范
4.1 配色方案
应用采用深色主题,营造沉浸式的回溯体验:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主背景 | #0A0E21 | 深邃夜空色 |
| 卡片背景 | #1A1F3A | 稍浅的深色 |
| 强调色 | #FFD700 | 金色高亮 |
| 极度开心 | #FFD700 | 金色 |
| 开心 | #4CAF50 | 绿色 |
| 平静 | #2196F3 | 蓝色 |
| 思考 | #9C27B0 | 紫色 |
| 疲惫 | #607D8B | 灰色 |
| 焦虑 | #FF9800 | 橙色 |
| 难过 | #3F51B5 | 靛蓝 |
| 愤怒 | #F44336 | 红色 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 28px | Bold | #FFFFFF |
| 存档标题 | 18px | Bold | #FFFFFF |
| 存档描述 | 14px | Regular | #B0BEC5 |
| 心情分数 | 24px | Bold | 心情颜色 |
| 时间显示 | 12px | Regular | #757575 |
| 标签文字 | 12px | Medium | 标签颜色 |
4.3 组件规范
4.3.1 时间轴界面
┌─────────────────────────────────────────────────┐
│ 人生存档 │
│ 记录每一个重要时刻 │
├─────────────────────────────────────────────────┤
│ │
│ ●────────────────────────────────────────── │
│ │ ┌─────────────────────────────────────┐ │
│ │ │ 🎉 项目上线 │ │
│ │ │ 辛苦三个月的项目终于上线了 │ │
│ │ │ [开心] [快速存档] 30天前 │ │
│ │ │ #工作 #成就 #团队 │ │
│ │ └─────────────────────────────────────┘ │
│ │ │
│ ●────────────────────────────────────────── │
│ │ ┌─────────────────────────────────────┐ │
│ │ │ 😌 周末独处时光 │ │
│ │ │ 安静的周末下午，享受独处的宁静 │ │
│ │ │ [平静] [快速存档] 7天前 │ │
│ │ │ #休息 #阅读 #独处 │ │
│ │ └─────────────────────────────────────┘ │
│ │ │
│ ● │
│ │
│ ┌─────┐ │
│ │ ⚡ │ │
│ └─────┘ │
└─────────────────────────────────────────────────┘
4.3.2 存档详情卡片
┌─────────────────────────────────────────────────┐
│ │
│ 🎉 │
│ │
│ 项目上线 ⭐ │
│ 2024年1月15日 下午 │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 心情状态 │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ 🎉 开心 │ │ │
│ │ │ 心情愉悦舒畅 │ │ │
│ │ │ ████████████████░░░░ 88 │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 存档描述 │
│ 辛苦三个月的项目终于上线了 │
│ │
│ 当时想法 │
│ • 团队的努力没有白费 │
│ • 接下来要好好休息一下 │
│ │
│ 环境信息 │
│ ┌──────────┐ ┌──────────┐ │
│ │ ☀ 晴 │ │ 🌡 18°C │ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 🌸 春季 │ │ ☀ 下午 │ │
│ └──────────┘ └──────────┘ │
│ │
│ 状态标签 │
│ #工作 #成就 #团队 │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ 📜 回溯体验 │ │ 🗑 删除存档 │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────┘
4.3.3 创建存档界面
┌─────────────────────────────────────────────────┐
│ 创建存档 │
│ 保存当前时刻的状态 │
├─────────────────────────────────────────────────┤
│ │
│ 存档标题 │
│ ┌─────────────────────────────────────────┐ │
│ │ 给这个时刻起个名字 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 心情类型 │
│ [🎉 极度开心] [😊 开心] [😌 平静] [🤔 思考] │
│ [😫 疲惫] [😰 焦虑] [😢 难过] [😠 愤怒] │
│ │
│ 心情分数 │
│ ○────────────────────────●──────────────○ 70 │
│ │
│ 存档描述 │
│ ┌─────────────────────────────────────────┐ │
│ │ 描述当前的状态和感受 │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 存档类型 │
│ [🔄 自动存档] [⚡ 快速存档] [⭐ 重要存档] │
│ │
│ 状态标签 │
│ [#工作] [#学习] [#生活] [#健康] [#家庭] │
│ [#朋友] [#爱情] [#旅行] [#美食] [#运动] │
│ │
│ 当时想法 │
│ ┌─────────────────────────────────────────┐ │
│ │ 输入想法后按回车添加 + │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ " 新的一年，新的开始 " ✕ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 重要标记 │
│ [═══════════] 标记为重要存档 │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 保存存档 │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
4.3.4 统计页面
┌─────────────────────────────────────────────────┐
│ 存档统计 │
│ 分析你的人生轨迹 │
├─────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 总览 │ │
│ │ 💾 总存档数: 15 │ │
│ │ ⭐ 重要存档: 3 │ │
│ │ 😊 平均心情分: 72.5 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 心情分布 │ │
│ │ 😊 开心 ████████████ 5次 (33.3%) │ │
│ │ 😌 平静 ████████ 4次 (26.7%) │ │
│ │ 🤔 思考 ██████ 3次 (20.0%) │ │
│ │ 😰 焦虑 ████ 2次 (13.3%) │ │
│ │ 😫 疲惫 ██ 1次 (6.7%) │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 心情趋势 │ │
│ │ ╭───╮ │ │
│ │ ╭╯ ╰╮ ╭─╮ │ │
│ │ ╭╯ ╰──╯ ╰╮ │ │
│ │ ╭╯ ╰── │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 热门标签 │ │
│ │ #工作(5) #生活(4) #学习(3) #健康(2) │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
五、核心功能实现
5.1 存档创建
void _createSave({
required String title,
required MoodType moodType,
required int moodScore,
required String description,
required SaveSlot slotType,
required List<String> tags,
required List<String> thoughts,
String? location,
bool isImportant = false,
}) {
final save = LifeSave(
id: 'save_${DateTime.now().millisecondsSinceEpoch}',
title: title,
moodType: moodType,
moodScore: moodScore,
description: description,
createdAt: DateTime.now(),
slotType: slotType,
tags: tags,
environment: EnvironmentInfo.getCurrent(),
thoughts: thoughts,
location: location,
isImportant: isImportant,
);
setState(() {
_saves.insert(0, save);
});
}
5.2 快速存档
void _quickSave() {
_createSave(
title: '快速存档 ${_saves.where((s) => s.slotType == SaveSlot.quick).length + 1}',
moodType: MoodType.calm,
moodScore: 70,
description: '快速记录当前状态',
slotType: SaveSlot.quick,
tags: ['快速记录'],
thoughts: [],
);
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('快速存档成功！'),
backgroundColor: Color(0xFF4CAF50),
),
);
}
5.3 存档删除
void _deleteSave(String id) {
setState(() {
_saves.removeWhere((save) => save.id == id);
if (_selectedSave?.id == id) {
_selectedSave = null;
}
});
}
5.4 心情趋势图绘制
class MoodTrendPainter extends CustomPainter {
final List<LifeSave> saves;
MoodTrendPainter(this.saves);
void paint(Canvas canvas, Size size) {
if (saves.length < 2) return;
final paint = Paint()
..color = const Color(0xFFFFD700)
..strokeWidth = 2
..style = PaintingStyle.stroke;
final fillPaint = Paint()
..shader = LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xFFFFD700).withOpacity(0.3),
const Color(0xFFFFD700).withOpacity(0.0),
],
).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
final path = Path();
final fillPath = Path();
final stepX = size.width / (saves.length - 1);
for (int i = 0; i < saves.length; i++) {
final x = i * stepX;
final y = size.height - (saves[i].moodScore / 100 * size.height);
if (i == 0) {
path.moveTo(x, y);
fillPath.moveTo(x, size.height);
fillPath.lineTo(x, y);
} else {
path.lineTo(x, y);
fillPath.lineTo(x, y);
}
}
fillPath.lineTo(size.width, size.height);
fillPath.close();
canvas.drawPath(fillPath, fillPaint);
canvas.drawPath(path, paint);
for (int i = 0; i < saves.length; i++) {
final x = i * stepX;
final y = size.height - (saves[i].moodScore / 100 * size.height);
final dotPaint = Paint()
..color = saves[i].moodType.color
..style = PaintingStyle.fill;
canvas.drawCircle(Offset(x, y), 4, dotPaint);
}
}
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
5.5 时间格式化
String _formatDateTime(DateTime dateTime) {
final now = DateTime.now();
final difference = now.difference(dateTime);
if (difference.inDays == 0) {
if (difference.inHours == 0) {
return '${difference.inMinutes}分钟前';
}
return '${difference.inHours}小时前';
} else if (difference.inDays == 1) {
return '昨天';
} else if (difference.inDays < 7) {
return '${difference.inDays}天前';
} else {
return '${dateTime.month}月${dateTime.day}日';
}
}
六、交互设计
6.1 存档浏览流程
6.2 存档创建流程
七、运行说明
7.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
7.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_save_system.dart --web-port 8137
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_save_system.dart
# 运行到Windows
flutter run -d windows -t lib/main_save_system.dart
# 代码分析
flutter analyze lib/main_save_system.dart
八、总结
存档系统应用将游戏存档的创新概念引入真实生活,让用户能够保存和回溯人生中的重要时刻。应用支持8种心情类型分类,4种存档槽位类型,通过心情记录、状态标签、环境信息等多维度数据,构建完整的人生存档体系。
核心功能涵盖存档创建、时间轴浏览、回溯体验、统计分析四大模块。存档创建提供完整的心情记录功能;时间轴以可视化方式展示人生轨迹;回溯体验让用户重新感受当时的心境;统计分析帮助用户了解自己的情绪变化规律。
应用采用Material Design 3设计规范,以深邃夜空色为主背景,金色为强调色,营造沉浸式的回溯体验。通过本应用,希望能够帮助用户记录人生每个重要瞬间,在回溯过去中认识自己,在对比变化中感受成长。
保存此刻,回溯人生
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献14条内容
所有评论(0)