Flutter 框架跨平台鸿蒙开发 - 梦境故事续写器应用
摘要: 梦境故事续写器是一款基于Flutter开发的创意应用,帮助用户将梦境转化为完整故事。核心功能包括梦境记录、AI故事续写、风格选择(如诗意浪漫/悬疑紧张)、插图生成及故事管理。应用采用Material Design 3规范,支持多平台运行,架构分为表现层(四大模块)、业务层(故事生成逻辑)和数据层(梦境/故事模型)。通过类型化标签(10种梦境类型)和状态管理(草稿/已完成等),实现从梦境记录
欢迎加入开源鸿蒙跨平台社区:
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图






1.1 应用简介
梦境故事续写器是一款创意娱乐类应用,致力于将每个人奇幻的梦境变成精彩的故事。用户可以记录自己的梦境,AI会帮助将梦境续写成完整的故事,还能生成精美插图。每个人都可以成为故事大王,让那些稍纵即逝的梦境在文字中永恒。
应用以深邃的靛蓝色为主色调,象征梦境的神秘与无限可能。涵盖梦境记录、我的故事、创作中心、个人中心四大模块。用户可以记录梦境、选择风格、生成故事、添加插图,实现从梦境到故事的完整创作流程。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 梦境记录 | 记录梦境内容与细节 | 表单输入 |
| AI续写 | 智能生成完整故事 | AI创作 |
| 风格选择 | 选择故事写作风格 | 风格预设 |
| 插图生成 | 为故事生成配图 | AI绘图 |
| 故事管理 | 管理创作的故事 | 列表展示 |
| 成就系统 | 创作成就激励 | 徽章奖励 |
1.3 梦境类型定义
| 序号 | 类型名称 | Emoji | 颜色代码 | 描述 |
|---|---|---|---|---|
| 1 | 冒险 | 🗡️ | #FF5722 | 刺激探险 |
| 2 | 浪漫 | 💕 | #E91E63 | 爱情故事 |
| 3 | 惊悚 | 👻 | #37474F | 恐怖悬疑 |
| 4 | 奇幻 | 🧙 | #9C27B0 | 魔法世界 |
| 5 | 科幻 | 🚀 | #2196F3 | 未来科技 |
| 6 | 悬疑 | 🔍 | #607D8B | 解谜探案 |
| 7 | 喜剧 | 😂 | #FFEB3B | 轻松幽默 |
| 8 | 怀旧 | 🎞️ | #795548 | 往事回忆 |
| 9 | 超现实 | 🌀 | #00BCD4 | 荒诞离奇 |
| 10 | 噩梦 | 😱 | #F44336 | 恐惧不安 |
1.4 故事风格定义
| 序号 | 风格名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 诗意浪漫 | 🌸 | 优美婉转的文字 |
| 2 | 悬疑紧张 | 🎭 | 扣人心弦的节奏 |
| 3 | 童话温馨 | 🏰 | 温暖治愈的氛围 |
| 4 | 史诗宏大 | ⚔️ | 气势磅礴的史诗感 |
| 5 | 幽默诙谐 | 😄 | 轻松有趣的调侃 |
| 6 | 哲思深邃 | 💭 | 引人深思的哲学 |
1.5 故事状态定义
| 序号 | 状态名称 | Emoji | 颜色代码 | 描述 |
|---|---|---|---|---|
| 1 | 草稿 | 📝 | #9E9E9E | 尚未完成 |
| 2 | 生成中 | ⏳ | #FF9800 | AI创作中 |
| 3 | 已完成 | ✅ | #4CAF50 | 创作完成 |
| 4 | 已发布 | 🌟 | #2196F3 | 已公开发布 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 导航控制 | TabController | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_dream_writer.dart
├── DreamWriterApp # 应用入口
├── DreamType # 梦境类型枚举
├── StoryStyle # 故事风格枚举
├── StoryStatus # 故事状态枚举
├── DreamRecord # 梦境记录模型
├── Story # 故事模型
├── Illustration # 插图模型
├── UserProfile # 用户档案模型
├── DreamWriterHomePage # 主页面(底部导航)
├── _buildDreamsPage # 梦境记录页
├── _buildStoriesPage # 我的故事页
├── _buildCreationPage # 创作中心页
└── _buildProfilePage # 个人中心页
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 故事创作流程
三、核心模块设计
3.1 数据模型设计
3.1.1 梦境类型枚举 (DreamType)
enum DreamType {
adventure('冒险', '🗡️', Color(0xFFFF5722)),
romance('浪漫', '💕', Color(0xFFE91E63)),
horror('惊悚', '👻', Color(0xFF37474F)),
fantasy('奇幻', '🧙', Color(0xFF9C27B0)),
scifi('科幻', '🚀', Color(0xFF2196F3)),
mystery('悬疑', '🔍', Color(0xFF607D8B)),
comedy('喜剧', '😂', Color(0xFFFFEB3B)),
nostalgic('怀旧', '🎞️', Color(0xFF795548)),
surreal('超现实', '🌀', Color(0xFF00BCD4)),
nightmare('噩梦', '😱', Color(0xFFF44336));
final String label;
final String icon;
final Color color;
}
3.1.2 故事风格枚举 (StoryStyle)
enum StoryStyle {
poetic('诗意浪漫', '🌸', '优美婉转的文字风格'),
suspense('悬疑紧张', '🎭', '扣人心弦的叙事节奏'),
fairytale('童话温馨', '🏰', '温暖治愈的童话氛围'),
epic('史诗宏大', '⚔️', '气势磅礴的史诗感'),
humorous('幽默诙谐', '😄', '轻松有趣的调侃风格'),
philosophical('哲思深邃', '💭', '引人深思的哲学意味');
final String label;
final String icon;
final String description;
}
3.1.3 梦境记录模型 (DreamRecord)
class DreamRecord {
final String id; // 梦境ID
final String title; // 标题
final String content; // 内容
final DreamType type; // 类型
final DateTime dreamDate; // 梦境日期
final DateTime createdAt; // 创建时间
final List<String> keywords; // 关键词
final String? mood; // 心情
final int? clarity; // 清晰度(1-5)
}
3.1.4 故事模型 (Story)
class Story {
final String id; // 故事ID
final String dreamId; // 关联梦境ID
final String title; // 标题
final String content; // 内容
final StoryStyle style; // 风格
final StoryStatus status; // 状态
final int wordCount; // 字数
final int chapterCount; // 章节数
final List<String> illustrations; // 插图
final DateTime createdAt; // 创建时间
final DateTime? completedAt; // 完成时间
final int likes; // 点赞数
final int reads; // 阅读数
}
3.1.5 梦境类型分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 梦境记录页结构
3.2.3 故事卡片结构
┌─────────────────────────────────────┐
│ 云端之城的守护者 ✅ 已完成 │
│ 在世界的尽头,有一座漂浮在... │
│ [🌸 诗意浪漫] 📝 3500字 ❤️ 45 │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ 🌅 │ │ 🏰 │ │ ✨ │ │
│ └────┘ └────┘ └────┘ │
└─────────────────────────────────────┘
3.3 AI故事生成逻辑
3.4 故事质量评估
故事质量评分公式:
KaTeX parse error: Undefined control sequence: \item at position 90: …Style + \delta \̲i̲t̲e̲m̲ ̲Engagement
评分维度说明:
| 维度 | 权重 | 评估标准 |
|---|---|---|
| 连贯性 | 30% | 情节逻辑是否通顺 |
| 创意性 | 25% | 故事是否新颖独特 |
| 风格契合 | 25% | 是否符合选定风格 |
| 吸引力 | 20% | 是否引人入胜 |
四、UI设计规范
4.1 配色方案
应用以深邃的靛蓝色为主色调,象征梦境的神秘与无限可能:
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #1A237E (Indigo) | 导航、主题元素 |
| 辅助色 | #283593 | 卡片背景 |
| 第三色 | #0D1B2A | 页面背景 |
| 强调色 | #3F51B5 | 进度条 |
| 背景色 | #0D1B2A | 页面背景 |
| 卡片背景 | #1A237E | 统计卡片 |
4.2 梦境类型颜色规范
| 类型 | 色值 | 视觉效果 |
|---|---|---|
| 冒险 | #FF5722 | 橙红 |
| 浪漫 | #E91E63 | 粉色 |
| 惊悚 | #37474F | 深灰 |
| 奇幻 | #9C27B0 | 紫色 |
| 科幻 | #2196F3 | 蓝色 |
| 悬疑 | #607D8B | 灰蓝 |
| 喜剧 | #FFEB3B | 黄色 |
| 怀旧 | #795548 | 棕色 |
| 超现实 | #00BCD4 | 青色 |
| 噩梦 | #F44336 | 红色 |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 白色 |
| 梦境标题 | 16px | Bold | 白色 |
| 故事标题 | 16px | Bold | 白色 |
| 内容文字 | 13px | Regular | 白色70% |
| 标签文字 | 10px | Regular | 白色 |
4.4 组件规范
4.4.1 梦境卡片
┌─────────────────────────────────────┐
│ 飞翔在云端的城市 🧙 奇幻 │
│ 我梦见自己长出了翅膀,飞越... │
│ [飞翔] [城市] [水晶] [云端] │
│ 😊 愉悦 ⭐ 清晰度 4/5 3/15 │
│ 编辑 [创作故事] │
└─────────────────────────────────────┘
4.4.2 故事卡片
┌─────────────────────────────────────┐
│ 云端之城的守护者 ✅ 已完成 │
│ 在世界的尽头,有一座漂浮在... │
│ [🌸 诗意浪漫] 📝 3500字 ❤️ 45 │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ 🌅 │ │ 🏰 │ │ ✨ │ │
│ └────┘ └────┘ └────┘ │
└─────────────────────────────────────┘
4.4.3 用户档案卡
┌─────────────────────────────────────┐
│ 🌙 │
│ 梦境编织者 │
│ ┌─────┬─────┬─────┬─────┐ │
│ │🌙 │📖 │📝 │❤️ │ │
│ │28 │15 │45000│356 │ │
│ │梦境 │故事 │字数 │喜欢 │ │
│ └─────┴─────┴─────┴─────┘ │
└─────────────────────────────────────┘
4.4.4 创作步骤项
┌─────────────────────────────────────┐
│ ① 记录梦境 → │
│ 详细描述你的梦境内容 │
└─────────────────────────────────────┘
五、核心功能实现
5.1 梦境记录实现
void _recordDream() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Row(
children: [
Icon(Icons.nights_stay, color: Colors.indigoAccent),
SizedBox(width: 8),
Text('记录梦境'),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(decoration: InputDecoration(hintText: '梦境标题')),
TextField(
maxLines: 5,
decoration: InputDecoration(hintText: '描述你的梦境...'),
),
DropdownButtonFormField<DreamType>(
decoration: InputDecoration(hintText: '梦境类型'),
items: DreamType.values.map((t) =>
DropdownMenuItem(value: t, child: Text('${t.icon} ${t.label}'))
).toList(),
onChanged: (value) {},
),
],
),
),
);
}
5.2 故事生成流程
void _generateStory(DreamRecord dream) {
setState(() {
_isGenerating = true;
});
Future.delayed(const Duration(seconds: 3), () {
setState(() {
_isGenerating = false;
});
_showStyleSelection(dream);
});
}
void _startGeneration(DreamRecord dream, StoryStyle style) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularProgressIndicator(),
Text('AI正在创作故事...'),
Text('风格: ${style.icon} ${style.label}'),
],
),
),
);
}
5.3 故事字数统计
字数计算:
W o r d C o u n t = ∑ i = 1 n C h a p t e r W o r d s i WordCount = \sum_{i=1}^{n} ChapterWords_i WordCount=i=1∑nChapterWordsi
章节规划:
C h a p t e r C o u n t = ⌈ W o r d C o u n t 800 ⌉ ChapterCount = \lceil \frac{WordCount}{800} \rceil ChapterCount=⌈800WordCount⌉
5.4 插图生成提示词
插图提示词构建:
String buildIllustrationPrompt(Story story, int chapter) {
return '''
风格: ${story.style.label}
场景: ${extractScene(story.content, chapter)}
氛围: ${analyzeMood(story.content)}
元素: ${extractElements(story.content)}
''';
}
六、交互设计
6.1 记录梦境流程
6.2 故事创作流程
6.3 故事分享流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 AI模型接入
AI功能:
- 接入大语言模型
- 多风格故事生成
- 智能续写建议
- 情感分析
7.2.2 插图生成
插图功能:
- AI绘图模型接入
- 多风格插图
- 场景智能识别
- 自定义插图
7.2.3 社区功能
社区功能:
- 故事广场
- 点赞评论
- 关注作者
- 故事合集
八、注意事项
8.1 开发注意事项
-
内容审核:AI生成内容需审核机制
-
隐私保护:梦境内容属于隐私数据
-
版权问题:AI生成内容的版权归属
-
性能优化:AI生成过程需优化等待体验
-
数据备份:故事数据需定期备份
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 生成时间长 | AI模型处理慢 | 显示进度动画 |
| 内容不连贯 | 梦境描述不清 | 引导详细描述 |
| 风格不符 | 风格理解偏差 | 提供示例参考 |
| 插图不匹配 | 场景识别错误 | 手动选择场景 |
| 数据丢失 | 未及时保存 | 自动保存机制 |
8.3 使用技巧
🌙 梦境记录技巧 🌙
记录建议
- 醒来后立即记录,记忆最清晰
- 详细描述场景、人物、情感
- 记录梦中特别的细节
- 标注梦境的清晰程度
风格选择
- 奇幻梦境选童话温馨风格
- 惊悚梦境选悬疑紧张风格
- 怀旧梦境选诗意浪漫风格
- 冒险梦境选史诗宏大风格
创作优化
- 提供更多梦境细节
- 选择合适的故事风格
- 多次生成选择最佳版本
- 手动编辑完善故事
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Web浏览器 | Chrome 90+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_dream_writer.dart --web-port 8143
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_dream_writer.dart
# 代码分析
flutter analyze lib/main_dream_writer.dart
十、总结
梦境故事续写器通过梦境记录、我的故事、创作中心、个人中心四大模块,为用户提供了一个从梦境到故事的完整创作平台。应用支持10种梦境类型、6种故事风格、4种故事状态,让每个人都能成为故事大王。
核心功能涵盖梦境记录、AI续写、风格选择、插图生成四大模块。梦境记录支持详细描述梦境内容和情感;AI续写实现了智能故事生成;风格选择提供了多种写作风格;插图生成为故事增添了视觉魅力。成就系统激励用户持续创作。
应用采用 Material Design 3 设计规范,以深邃的靛蓝色为主色调,象征梦境的神秘与无限可能。通过本应用,希望能够帮助用户将那些稍纵即逝的梦境变成永恒的故事,让每个人都能成为故事大王。
梦境故事续写器——每个人都是故事大王
更多推荐




所有评论(0)