Flutter 框架跨平台鸿蒙开发 - 最后的话应用
·
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
最后的话是一款关于生命意义的深度思考应用。假设今天是世界末日,你想对这个世界、对身边的人说些什么?应用提供了一个安全的空间,让用户写下自己最想说的话,同时也让用户能够阅读他人留下的最后遗言,从中感受生命的珍贵和人性的温暖。
应用不仅是一个记录工具,更是一面镜子,让用户在面对"末日假设"时,重新审视自己的人生,思考什么才是真正重要的。通过阅读他人的最后的话,用户可以培养同理心,理解不同人的人生价值观。
1.2 核心理念
面对死亡,才能真正理解生命的意义。最后的话的设计理念基于以下原则:
| 设计原则 | 理论基础 | 应用体现 |
|---|---|---|
| 死亡意识 | 死亡意识理论 | 通过末日假设引发思考 |
| 价值澄清 | 价值观澄清理论 | 明确人生真正重要的东西 |
| 情感表达 | 情感表达理论 | 勇敢表达内心深处的情感 |
| 同理心培养 | 共情理论 | 理解他人的人生选择 |
1.3 核心功能
1.4 接收者分类
应用支持多种接收者类型:
| 类型 | 图标 | 颜色 | 描述 | 典型内容 |
|---|---|---|---|---|
| 家人 | 👨👩👧👦 | #E91E63 | 给家人的话 | 感谢养育、表达爱意 |
| 爱人 | 💕 | #F44336 | 给爱人的话 | 最后告白、遗憾表白 |
| 朋友 | 👫 | #2196F3 | 给朋友的话 | 感谢陪伴、珍贵回忆 |
| 自己 | 🪞 | #9C27B0 | 给自己的话 | 人生总结、自我和解 |
| 世界 | 🌍 | #4CAF50 | 给世界的话 | 人生感悟、最后寄语 |
| 陌生人 | 👤 | #607D8B | 给陌生人的话 | 人生建议、善意提醒 |
| 敌人 | ⚔️ | #FF9800 | 给曾经的敌人 | 原谅释怀、放下恩怨 |
| 未来 | 🔮 | #00BCD4 | 给未来的人 | 跨时空对话、传承智慧 |
1.5 情感类型分类
| 情感 | 图标 | 颜色 | 描述 |
|---|---|---|---|
| 感恩 | 🙏 | #4CAF50 | 感谢生命中的美好 |
| 遗憾 | 😢 | #3F51B5 | 表达未完成的心愿 |
| 告白 | 💝 | #E91E63 | 最后的爱意表达 |
| 道歉 | 🙇 | #FF9800 | 请求原谅和和解 |
| 嘱托 | 📝 | #2196F3 | 最后的嘱托和期望 |
| 释然 | 😌 | #9C27B0 | 放下一切,平静面对 |
| 愤怒 | 😠 | #F44336 | 最后的不满和控诉 |
| 祝福 | ✨ | #FFD700 | 对他人的美好祝愿 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 动画控制 | AnimationController | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_last_words.dart
├── LastWordsApp # 应用入口
├── RecipientType # 接收者类型枚举
├── EmotionType # 情感类型枚举
├── LastWord # 最后的话模型
├── LastWordsPage # 主页面(底部导航)
├── _buildWritePage # 写下遗言页
├── _buildReadPage # 阅读他人页
└── _buildMyWordsPage # 我的话页
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 写作流程
2.4 阅读流程
三、核心模块设计
3.1 数据模型设计
3.1.1 接收者类型枚举 (RecipientType)
enum RecipientType {
family('家人', '👨👩👧👦', Color(0xFFE91E63), '给家人的话'),
lover('爱人', '💕', Color(0xFFF44336), '给爱人的话'),
friend('朋友', '👫', Color(0xFF2196F3), '给朋友的话'),
self('自己', '🪞', Color(0xFF9C27B0), '给自己的话'),
world('世界', '🌍', Color(0xFF4CAF50), '给世界的话'),
stranger('陌生人', '👤', Color(0xFF607D8B), '给陌生人的话'),
enemy('曾经的敌人', '⚔️', Color(0xFFFF9800), '给曾经的敌人'),
future('未来的人', '🔮', Color(0xFF00BCD4), '给未来的人');
final String label;
final String icon;
final Color color;
final String description;
}
3.1.2 情感类型枚举 (EmotionType)
enum EmotionType {
gratitude('感恩', '🙏', Color(0xFF4CAF50), '感谢生命中的美好'),
regret('遗憾', '😢', Color(0xFF3F51B5), '表达未完成的心愿'),
confession('告白', '💝', Color(0xFFE91E63), '最后的爱意表达'),
apology('道歉', '🙇', Color(0xFFFF9800), '请求原谅和和解'),
request('嘱托', '📝', Color(0xFF2196F3), '最后的嘱托和期望'),
peace('释然', '😌', Color(0xFF9C27B0), '放下一切,平静面对'),
anger('愤怒', '😠', Color(0xFFF44336), '最后的不满和控诉'),
blessing('祝福', '✨', Color(0xFFFFD700), '对他人的美好祝愿');
final String label;
final String icon;
final Color color;
final String description;
}
3.1.3 最后的话模型 (LastWord)
class LastWord {
final String id; // 唯一标识
final String content; // 内容
final RecipientType recipient;// 接收者
final EmotionType emotion; // 情感类型
final DateTime createdAt; // 创建时间
final List<String> tags; // 标签
final bool isAnonymous; // 是否匿名
int likes; // 点赞数
final String? authorName; // 作者名称(非匿名)
}
3.1.4 接收者分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 写作页面结构
3.2.3 阅读页面结构
3.3 随机展示算法
LastWord _getRandomWord({
RecipientType? recipient,
EmotionType? emotion,
}) {
var pool = _allWords.where((word) {
if (recipient != null && word.recipient != recipient) return false;
if (emotion != null && word.emotion != emotion) return false;
return true;
}).toList();
if (pool.isEmpty) {
pool = _allWords;
}
pool.shuffle();
return pool.first;
}
3.4 统计分析
Map<String, dynamic> _calculateStatistics() {
final total = _myWords.length;
final byRecipient = <RecipientType, int>{};
for (final type in RecipientType.values) {
byRecipient[type] = _myWords.where((w) => w.recipient == type).length;
}
final byEmotion = <EmotionType, int>{};
for (final type in EmotionType.values) {
byEmotion[type] = _myWords.where((w) => w.emotion == type).length;
}
final totalLikes = _myWords.fold(0, (sum, w) => sum + w.likes);
return {
'total': total,
'byRecipient': byRecipient,
'byEmotion': byEmotion,
'totalLikes': totalLikes,
};
}
四、UI设计规范
4.1 配色方案
应用采用深沉的色调,营造末日氛围:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主背景 | #0A0A0F | 深邃黑色 |
| 卡片背景 | #151520 | 稍浅深色 |
| 主色 | #E91E63 | 粉红色(生命) |
| 家人 | #E91E63 | 粉红色 |
| 爱人 | #F44336 | 红色 |
| 朋友 | #2196F3 | 蓝色 |
| 自己 | #9C27B0 | 紫色 |
| 世界 | #4CAF50 | 绿色 |
| 陌生人 | #607D8B | 灰色 |
| 敌人 | #FF9800 | 橙色 |
| 未来 | #00BCD4 | 青色 |
4.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 28px | Bold | #FFFFFF |
| 遗言内容 | 16px | Regular | #FFFFFF |
| 接收者标签 | 12px | Medium | 接收者颜色 |
| 情感标签 | 12px | Medium | 情感颜色 |
| 时间显示 | 11px | Regular | #757575 |
4.3 组件规范
4.3.1 写作界面
┌─────────────────────────────────────────────────┐
│ 写下最后的话 │
│ 如果今天是世界末日,你想说什么? │
├─────────────────────────────────────────────────┤
│ │
│ 选择接收者 │
│ [👨👩👧👦 家人] [💕 爱人] [👫 朋友] [🪞 自己] │
│ [🌍 世界] [👤 陌生人] [⚔️ 敌人] [🔮 未来] │
│ │
│ 选择情感 │
│ [🙏 感恩] [😢 遗憾] [💝 告白] [🙇 道歉] │
│ [📝 嘱托] [😌 释然] [😠 愤怒] [✨ 祝福] │
│ │
│ 写下你想说的话 │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ │ 如果今天是最后一天... │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 添加标签 │
│ [#爱] [#感谢] [#遗憾] [#原谅] │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 🔒 匿名发布 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 保存遗言 │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
4.3.2 阅读界面
┌─────────────────────────────────────────────────┐
│ 阅读他人的话 │
│ 感受不同人生的选择 │
├─────────────────────────────────────────────────┤
│ │
│ [全部] [家人] [爱人] [朋友] [自己] [世界] │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 👨👩👧👦 给家人 · 🙏 感恩 │ │
│ │ │ │
│ │ 爸妈,谢谢你们带我来到这个世界, │ │
│ │ 虽然人生有很多遗憾,但我不后悔 │ │
│ │ 做你们的孩子。希望来世还能相遇。 │ │
│ │ │ │
│ │ #感谢 #家人 #爱 │ │
│ │ │ │
│ │ ❤️ 128 · 2小时前 · 匿名 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ 💕 给爱人 · 💝 告白 │ │
│ │ │ │
│ │ 亲爱的,对不起没能陪你走到最后。 │ │
│ │ 你是我生命中最美好的相遇, │ │
│ │ 谢谢你让我懂得什么是爱。 │ │
│ │ │ │
│ │ #告白 #爱 #感谢 │ │
│ │ │ │
│ │ ❤️ 256 · 5小时前 · 匿名 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ [🎲 随机下一条] │
│ │
└─────────────────────────────────────────────────┘
4.3.3 我的话界面
┌─────────────────────────────────────────────────┐
│ 我的话 │
├─────────────────────────────────────────────────┤
│ │
│ 📊 统计 │
│ ┌─────────────────────────────────────────┐ │
│ │ 总遗言: 5条 │ │
│ │ 总点赞: 42次 │ │
│ │ 最常写给: 家人 │ │
│ └─────────────────────────────────────────┘ │
│ │
│ 我的遗言 │
│ ┌─────────────────────────────────────────┐ │
│ │ 👨👩👧👦 给家人 · 🙏 感恩 │ │
│ │ │ │
│ │ 爸妈,谢谢你们... │ │
│ │ │ │
│ │ ❤️ 128 · 1天前 │ │
│ │ │ │
│ │ [编辑] [删除] │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘
五、核心功能实现
5.1 写下遗言
void _writeWord({
required String content,
required RecipientType recipient,
required EmotionType emotion,
required List<String> tags,
required bool isAnonymous,
}) {
final word = LastWord(
id: 'word_${DateTime.now().millisecondsSinceEpoch}',
content: content,
recipient: recipient,
emotion: emotion,
createdAt: DateTime.now(),
tags: tags,
isAnonymous: isAnonymous,
likes: 0,
authorName: isAnonymous ? null : '我',
);
setState(() {
_myWords.insert(0, word);
_allWords.insert(0, word);
});
}
5.2 点赞功能
void _likeWord(LastWord word) {
setState(() {
word.likes++;
});
}
5.3 删除遗言
void _deleteWord(String id) {
setState(() {
_myWords.removeWhere((w) => w.id == id);
_allWords.removeWhere((w) => w.id == id);
});
}
5.4 随机获取
LastWord _getRandomWord({
RecipientType? recipient,
EmotionType? emotion,
}) {
var pool = _allWords.where((word) {
if (recipient != null && word.recipient != recipient) return false;
if (emotion != null && word.emotion != emotion) return false;
return true;
}).toList();
if (pool.isEmpty) {
pool = _allWords;
}
pool.shuffle();
return pool.first;
}
六、交互设计
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_last_words.dart --web-port 8142
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_last_words.dart
# 运行到Windows
flutter run -d windows -t lib/main_last_words.dart
# 代码分析
flutter analyze lib/main_last_words.dart
八、总结
最后的话应用通过末日假设引发用户对生命的深度思考。应用支持8种接收者类型,8种情感类型,让用户可以自由表达内心深处的情感。通过写下最后的话,用户可以重新审视自己的人生价值;通过阅读他人的遗言,用户可以培养同理心,理解不同人的人生选择。
核心功能涵盖写下遗言、阅读他人、我的话三大模块。写下遗言提供完整的表达工具;阅读他人让用户感受不同人生;我的话管理个人遗言记录。
应用采用Material Design 3设计规范,以深沉的色调营造末日氛围。通过本应用,希望能够帮助用户在面对死亡假设时,更加珍惜当下,勇敢表达爱,理解生命的意义。
面对末日,说出真心话
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
10
0- 0
已为社区贡献31条内容
所有评论(0)