欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
情绪过山车是一款独特的情感体验应用,通过精心设计的情绪场景和引导,让用户主动体验情绪的起伏变化。不同于传统的情绪管理应用追求"平静",本应用鼓励用户拥抱情绪的多样性,通过体验情感极限来增强心理韧性和同理心。
应用模拟过山车的起伏轨迹,设计了一系列情绪场景:从欢乐到悲伤、从愤怒到平静、从恐惧到勇气。用户可以在安全的环境中体验这些情绪波动,从而更好地理解自己和他人的情感世界。
1.2 核心理念
情绪不是敌人,而是生命的色彩。情绪过山车的设计理念基于以下原则:
| 设计原则 | 理论基础 | 应用体现 |
|---|---|---|
| 情绪暴露 | 暴露疗法 | 在安全环境中体验强烈情绪 |
| 情感教育 | 情绪智力理论 | 学习识别和理解情绪 |
| 同理心培养 | 共情理论 | 体验他人可能的情感 |
| 情绪韧性 | 心理韧性理论 | 通过波动增强承受力 |
1.3 核心功能
情绪过山车
核心功能
情绪旅程
场景选择
情绪引导
体验记录
反思总结
情绪类型
正向情绪
负向情绪
复杂情绪
混合情绪
同理心训练
角色代入
情境模拟
情感共鸣
理解他人
辅助功能
情绪日记
统计分析
提醒功能
分享功能
1.4 情绪类型分类
应用支持多种情绪类型体验:
| 类型 | 图标 | 颜色 | 强度 | 典型场景 |
|---|---|---|---|---|
| 极度喜悦 | 🎉 | #FFD700 | 5 | 梦想成真、意外惊喜 |
| 温暖幸福 | 🥰 | #FF6B6B | 4 | 与爱人相拥、家人团聚 |
| 深度悲伤 | 😢 | #3F51B5 | 5 | 失去挚爱、梦想破灭 |
| 愤怒爆发 | 😠 | #F44336 | 5 | 被背叛、遭遇不公 |
| 恐惧焦虑 | 😰 | #9C27B0 | 4 | 未知威胁、失控感 |
| 感动落泪 | 🥺 | #E91E63 | 4 | 被理解、被关爱 |
| 怀念追忆 | 🥲 | #607D8B | 3 | 回忆往昔、思念故人 |
| 平静释然 | 😌 | #4CAF50 | 2 | 放下执念、接受现实 |
1.5 情绪旅程系统
| 旅程名称 | 图标 | 时长 | 情绪曲线 | 描述 |
|---|---|---|---|---|
| 爱的旅程 | 💕 | 5分钟 | 起-伏-起 | 从相遇到分离再到释怀 |
| 失去与重生 | 🦋 | 8分钟 | 伏-伏-起 | 从失去到痛苦再到希望 |
| 愤怒的转化 | 🔥 | 6分钟 | 起-伏-平 | 从愤怒到理解再到原谅 |
| 恐惧的勇气 | 🦁 | 7分钟 | 伏-起-平 | 从恐惧到勇敢再到平静 |
| 成长的代价 | 🌱 | 10分钟 | 平-伏-起 | 从舒适到挑战再到成长 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_emotion_coaster.dart
├── EmotionCoasterApp # 应用入口
├── EmotionType # 情绪类型枚举
├── EmotionJourney # 情绪旅程枚举
├── EmotionScene # 情绪场景模型
├── ExperienceRecord # 体验记录模型
├── EmotionCoasterPage # 主页面(底部导航)
├── _buildJourneyPage # 旅程选择页
├── _buildExperiencePage # 体验进行页
└── _buildHistoryPage # 历史记录页二、系统架构
2.1 整体架构图
Data Layer
Business Logic Layer
Presentation Layer
主页面
EmotionCoasterPage
旅程选择
体验进行
历史记录
旅程卡片
情绪曲线预览
场景展示
情绪引导
进度显示
反思记录
体验列表
情绪统计
情绪引擎
场景管理器
体验记录器
同理心评估器
EmotionType
情绪类型枚举
EmotionJourney
旅程枚举
EmotionScene
场景模型
ExperienceRecord
记录模型
2.2 类图设计
manages
uses
has
contains
has
EmotionCoasterApp
+Widget build()
<<enumeration>>
EmotionType
+String label
+String icon
+Color color
+int intensity
+String description
+extremeJoy()
+warmHappiness()
+deepSadness()
+anger()
+fear()
+moved()
+nostalgia()
+peace()
<<enumeration>>
EmotionJourney
+String label
+String icon
+int duration
+List<EmotionType> curve
+String description
+loveJourney()
+lossRebirth()
+angerTransform()
+fearCourage()
+growth()
EmotionScene
+String id
+String title
+String description
+EmotionType emotion
+String guidance
+int duration
+String? reflection
ExperienceRecord
+String id
+EmotionJourney journey
+DateTime startTime
+DateTime endTime
+List<EmotionScene> completedScenes
+Map<String,String> reflections
+double empathyScore
+String? notes
EmotionCoasterPage
-int _selectedIndex
-List<ExperienceRecord> _records
-bool _isExperiencing
-EmotionJourney _currentJourney
+Widget build()
-_startJourney()
-_completeScene()
-_finishJourney()
2.3 情绪旅程流程
反思记录 场景管理 体验进行 旅程选择 用户 反思记录 场景管理 体验进行 旅程选择 用户 loop [每个场景] 浏览旅程 展示旅程列表 选择旅程 开始旅程 获取场景 返回场景 展示场景 体验情绪 记录反思 展示总结 保存记录 返回首页
2.4 情绪曲线算法
获取旅程类型
解析情绪曲线
生成场景序列
场景1: 起始情绪
场景2: 过渡情绪
场景3: 高潮情绪
场景4: 回落情绪
场景5: 结束情绪
计算同理心分数
生成体验报告
三、核心模块设计
3.1 数据模型设计
3.1.1 情绪类型枚举 (EmotionType)
dart
enum EmotionType {
extremeJoy('极度喜悦', '🎉', Color(0xFFFFD700), 5, '梦想成真、意外惊喜'),
warmHappiness('温暖幸福', '🥰', Color(0xFFFF6B6B), 4, '与爱人相拥、家人团聚'),
deepSadness('深度悲伤', '😢', Color(0xFF3F51B5), 5, '失去挚爱、梦想破灭'),
anger('愤怒爆发', '😠', Color(0xFFF44336), 5, '被背叛、遭遇不公'),
fear('恐惧焦虑', '😰', Color(0xFF9C27B0), 4, '未知威胁、失控感'),
moved('感动落泪', '🥺', Color(0xFFE91E63), 4, '被理解、被关爱'),
nostalgia('怀念追忆', '🥲', Color(0xFF607D8B), 3, '回忆往昔、思念故人'),
peace('平静释然', '😌', Color(0xFF4CAF50), 2, '放下执念、接受现实');
final String label;
final String icon;
final Color color;
final int intensity;
final String description;
}3.1.2 情绪旅程枚举 (EmotionJourney)
dart
enum EmotionJourney {
loveJourney('爱的旅程', '💕', 5, [温暖幸福, 深度悲伤, 平静释然], '从相遇到分离再到释怀'),
lossRebirth('失去与重生', '🦋', 8, [深度悲伤, 恐惧, 极度喜悦], '从失去到痛苦再到希望'),
angerTransform('愤怒的转化', '🔥', 6, [愤怒, 怀念, 平静], '从愤怒到理解再到原谅'),
fearCourage('恐惧的勇气', '🦁', 7, [恐惧, 愤怒, 温暖幸福], '从恐惧到勇敢再到平静'),
growth('成长的代价', '🌱', 10, [平静, 恐惧, 极度喜悦], '从舒适到挑战再到成长');
final String label;
final String icon;
final int duration;
final List<EmotionType> curve;
final String description;
}3.1.3 情绪场景模型 (EmotionScene)
dart
class EmotionScene {
final String id; // 唯一标识
final String title; // 场景标题
final String description; // 场景描述
final EmotionType emotion; // 情绪类型
final String guidance; // 引导文字
final int duration; // 持续时间(秒)
final String? reflection; // 反思问题
}3.1.4 体验记录模型 (ExperienceRecord)
dart
class ExperienceRecord {
final String id; // 唯一标识
final EmotionJourney journey; // 旅程类型
final DateTime startTime; // 开始时间
final DateTime endTime; // 结束时间
final List<EmotionScene> completedScenes; // 完成的场景
final Map<String, String> reflections; // 反思记录
final double empathyScore; // 同理心分数
final String? notes; // 备注
}3.1.5 情绪体验分布
20% 18% 15% 15% 12% 10% 5% 5% 情绪体验分布 极度喜悦 温暖幸福 深度悲伤 愤怒爆发 恐惧焦虑 感动落泪 怀念追忆 平静释然
3.2 页面结构设计
3.2.1 主页面布局
EmotionCoasterPage
IndexedStack
旅程选择
历史记录
NavigationBar
旅程 Tab
历史 Tab
3.2.2 旅程选择页面结构
旅程选择
页面标题
旅程卡片列表
旅程卡片
旅程图标
旅程名称
情绪曲线
时长显示
开始按钮
3.2.3 体验进行页面结构
体验进行
进度指示
情绪展示
场景描述
引导文字
反思输入
控制按钮
情绪图标
情绪名称
强度指示
3.3 场景生成算法
获取旅程类型
解析情绪曲线
为每个情绪生成场景
场景1: 引入情境
设定背景
建立连接
场景2: 情绪深化
加深体验
引导感受
场景3: 情绪高潮
达到顶点
充分体验
场景4: 情绪过渡
开始回落
引导反思
场景5: 情绪收尾
回归平静
总结感悟
3.4 同理心评分算法
dart
double _calculateEmpathyScore(ExperienceRecord record) {
double score = 0.0;
// 基础分: 完成所有场景
score += record.completedScenes.length * 10;
// 反思分: 每个反思增加分数
score += record.reflections.length * 5;
// 深度分: 反思内容长度
for (final reflection in record.reflections.values) {
if (reflection.length > 50) score += 3;
if (reflection.length > 100) score += 2;
}
// 情绪强度分: 体验高强度情绪
final highIntensityScenes = record.completedScenes
.where((s) => s.emotion.intensity >= 4)
.length;
score += highIntensityScenes * 5;
return min(score, 100);
}四、UI设计规范
4.1 配色方案
应用采用动态配色,随情绪变化:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主背景 | #0F0F1A | 深色背景 |
| 卡片背景 | #1A1A2E | 稍浅深色 |
| 极度喜悦 | #FFD700 | 金色 |
| 温暖幸福 | #FF6B6B | 珊瑚红 |
| 深度悲伤 | #3F51B5 | 靛蓝 |
| 愤怒爆发 | #F44336 | 红色 |
| 恐惧焦虑 | #9C27B0 | 紫色 |
| 感动落泪 | #E91E63 | 粉红 |
| 怀念追忆 | #607D8B | 灰蓝 |
| 平静释然 | #4CAF50 | 绿色 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 28px | Bold | #FFFFFF |
| 旅程名称 | 20px | Bold | #FFFFFF |
| 场景标题 | 24px | Medium | 情绪颜色 |
| 引导文字 | 16px | Regular | #B0BEC5 |
| 反思提示 | 14px | Italic | #757575 |
4.3 组件规范
4.3.1 旅程选择界面
┌─────────────────────────────────────────────────┐
│ 情绪过山车 │
│ 体验情感极限,培养同理心 │
├─────────────────────────────────────────────────┤
│ │
│ 选择情绪旅程 │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 💕 爱的旅程 │ │
│ │ │ │
│ │ 🥰 → 😢 → 😌 │ │
│ │ 从相遇到分离再到释怀 │ │
│ │ ⏱ 5分钟 │ │
│ │ │ │
│ │ [开始旅程] │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 🦋 失去与重生 │ │
│ │ │ │
│ │ 😢 → 😰 → 🎉 │ │
│ │ 从失去到痛苦再到希望 │ │
│ │ ⏱ 8分钟 │ │
│ │ │ │
│ │ [开始旅程] │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘4.3.2 体验进行界面
┌─────────────────────────────────────────────────┐
│ │
│ ━━━━━━━━━━━━━●━━━━━━━━━━━━━━━ 2/5 │
│ │
│ │
│ ┌─────────────────┐ │
│ │ │ │
│ │ 😢 │ │
│ │ │ │
│ │ 深度悲伤 │ │
│ │ │ │
│ │ ████████░░ │ │
│ │ 强度: 5 │ │
│ └─────────────────┘ │
│ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ │ 想象你收到了一个消息, │ │
│ │ 你最好的朋友要搬去另一个城市... │ │
│ │ │ │
│ │ 你感到一阵失落涌上心头, │ │
│ │ 那些一起度过的时光在脑海中闪过... │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 反思: 这个场景让你想到了什么? │
│ ┌─────────────────────────────────────────┐ │
│ │ 记录你的感受... │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [上一个] [下一个] │
│ │
└─────────────────────────────────────────────────┘4.3.3 完成总结界面
┌─────────────────────────────────────────────────┐
│ │
│ ✨ 旅程完成 │
│ │
│ ┌─────────────────┐ │
│ │ │ │
│ │ 💕 爱的旅程 │ │
│ │ │ │
│ └─────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 情绪曲线回顾 │ │
│ │ │ │
│ │ 🥰 ──────┐ │ │
│ │ │ │ │
│ │ ↓ │ │
│ │ 😢 ──────┤ │ │
│ │ │ │ │
│ │ ↓ │ │
│ │ 😌 ──────┘ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 同理心分数: 85 │ │
│ │ 完成场景: 5/5 │ │
│ │ 反思记录: 3条 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ 保存记录 │ │ 再次体验 │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────┘4.3.4 历史记录界面
┌─────────────────────────────────────────────────┐
│ 体验历史 │
├─────────────────────────────────────────────────┤
│ │
│ 📊 统计概览 │
│ ┌─────────────────────────────────────────┐ │
│ │ 总旅程: 12次 │ │
│ │ 平均同理心分数: 78 │ │
│ │ 最常体验: 爱的旅程 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 最近记录 │
│ ┌─────────────────────────────────────────┐ │
│ │ 💕 爱的旅程 · 同理心: 85 │ │
│ │ 2024-01-15 │ │
│ │ 🥰 → 😢 → 😌 │ │
│ └─────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────┐ │
│ │ 🦁 恐惧的勇气 · 同理心: 72 │ │
│ │ 2024-01-14 │ │
│ │ 😰 → 😠 → 🥰 │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘五、核心功能实现
5.1 旅程启动
dart
void _startJourney(EmotionJourney journey) {
setState(() {
_isExperiencing = true;
_currentJourney = journey;
_currentSceneIndex = 0;
_scenes = _generateScenes(journey);
_reflections = {};
_sessionStartTime = DateTime.now();
});
}5.2 场景生成
dart
List<EmotionScene> _generateScenes(EmotionJourney journey) {
final scenes = <EmotionScene>[];
for (int i = 0; i < journey.curve.length; i++) {
final emotion = journey.curve[i];
scenes.add(EmotionScene(
id: 'scene_${journey.name}_$i',
title: _getSceneTitle(emotion, i),
description: _getSceneDescription(emotion, journey, i),
emotion: emotion,
guidance: _getGuidance(emotion),
duration: _getSceneDuration(journey, i),
reflection: _getReflectionQuestion(emotion),
));
}
return scenes;
}5.3 情绪曲线绘制
dart
class EmotionCurvePainter extends CustomPainter {
final List<EmotionType> emotions;
final int currentIndex;
@override
void paint(Canvas canvas, Size size) {
final stepX = size.width / (emotions.length - 1);
// 绘制曲线
final path = Path();
for (int i = 0; i < emotions.length; i++) {
final x = i * stepX;
final y = size.height - (emotions[i].intensity / 5 * size.height);
if (i == 0) {
path.moveTo(x, y);
} else {
path.lineTo(x, y);
}
}
final paint = Paint()
..color = Colors.white.withOpacity(0.5)
..strokeWidth = 2
..style = PaintingStyle.stroke;
canvas.drawPath(path, paint);
// 绘制当前点
final currentX = currentIndex * stepX;
final currentY = size.height -
(emotions[currentIndex].intensity / 5 * size.height);
final dotPaint = Paint()
..color = emotions[currentIndex].color
..style = PaintingStyle.fill;
canvas.drawCircle(Offset(currentX, currentY), 8, dotPaint);
}
}5.4 同理心评分
dart
double _calculateEmpathyScore(ExperienceRecord record) {
double score = 0.0;
// 基础分: 完成所有场景
score += record.completedScenes.length * 10;
// 反思分: 每个反思增加分数
score += record.reflections.length * 5;
// 深度分: 反思内容长度
for (final reflection in record.reflections.values) {
if (reflection.length > 50) score += 3;
if (reflection.length > 100) score += 2;
}
// 情绪强度分
final highIntensityScenes = record.completedScenes
.where((s) => s.emotion.intensity >= 4)
.length;
score += highIntensityScenes * 5;
return min(score, 100);
}六、交互设计
6.1 旅程体验流程
完成总结 反思记录 体验进行 旅程选择 用户 完成总结 反思记录 体验进行 旅程选择 用户 loop [每个场景] 选择旅程 开始旅程 展示场景 体验情绪 记录反思 下一个场景 旅程结束 展示报告 保存记录 返回首页
6.2 情绪体验流程
是
否
进入场景
阅读场景描述
跟随引导体验
感受情绪变化
记录反思
还有下一个场景?
完成旅程
查看情绪曲线
查看同理心分数
保存记录
七、运行说明
7.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
7.2 运行命令
bash
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_emotion_coaster.dart --web-port 8140
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_emotion_coaster.dart
# 运行到Windows
flutter run -d windows -t lib/main_emotion_coaster.dart
# 代码分析
flutter analyze lib/main_emotion_coaster.dart八、总结
情绪过山车应用通过精心设计的情绪旅程,让用户在安全的环境中体验情感的极限波动。应用支持5种情绪旅程,8种情绪类型,通过场景引导、反思记录、同理心评分等功能,帮助用户增强心理韧性和同理心。
核心功能涵盖旅程选择、体验进行、历史记录三大模块。旅程选择提供情绪曲线预览;体验进行引导用户深入感受情绪;历史记录追踪同理心成长轨迹。
应用采用Material Design 3设计规范,以动态配色随情绪变化,营造沉浸式的情感体验。通过本应用,希望能够帮助用户拥抱情绪的多样性,在体验情感极限中培养更深的同理心。
拥抱情绪,体验人生