Flutter 框架跨平台鸿蒙开发 - 亲子故事共创

亲子故事共创应用欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net一、项目概述运行效果图1.1 应用简介亲子故事共创是一款亲子教育类应用核心理念是父母孩子一起创作专属故事书。通过角色设定、剧情分支、插图生成的完整创作流程让家长和孩子共同参与故事创作最终生成可打印的专属故事书。每个孩子都是天生的故事家他们拥有无穷的想象力和创造力。本应用为亲子互动提供了一个创意平台让家长引导孩子发挥想象力在创作过程中增进亲子感情培养孩子的表达能力、逻辑思维和创造力。1.2 核心功能功能模块功能描述实现方式主题选择选择故事背景主题6种故事主题角色设定创造故事角色类型形象特点剧情分支选择故事发展方向双选项分支系统插图生成为故事配图Emoji表情插图故事书架管理创作的故事网格展示时间排序分享导出打印和分享故事打印/PDF/分享1.3 故事主题序号主题Emoji颜色典型元素1冒险故事️#2196F3探险、寻宝、旅行2童话故事#E91E63魔法、精灵、城堡3科幻故事#9C27B0太空、未来、科技4动物故事#4CAF50森林、动物、自然5侦探故事#FF9800解谜、推理、冒险6友情故事#00BCD4朋友、帮助、成长1.4 角色类型序号类型Emoji颜色角色定位1主角#F44336故事核心人物2助手#4CAF50帮助主角的人3反派#9C27B0制造冲突的人4朋友#2196F3主角的伙伴5宠物#FF9800忠诚的伙伴6智者#00BCD4提供智慧的人1.5 技术栈技术领域技术选型版本要求开发框架Flutter 3.0.0编程语言Dart 2.17.0设计规范Material Design 3-状态管理setState-动画控制AnimationController-目标平台鸿蒙OS / WebAPI 21二、项目结构lib/ ├── main_story_cocreation.dart # 应用主入口 │ ├── StoryCoCreationApp # 根应用组件 │ ├── StoryTheme # 故事主题枚举 │ ├── CharacterType # 角色类型枚举 │ ├── StoryCharacter # 故事角色模型 │ ├── StoryBranch # 剧情分支模型 │ ├── StoryBook # 故事书模型 │ ├── StoryPage # 故事页模型 │ ├── StoryCoCreationHomePage # 主页面 │ ├── StoryCreationPage # 创作页面 │ └── StoryViewPage # 阅读页面三、数据模型3.1 StoryTheme 枚举enumStoryTheme{adventure(冒险故事,️,Color(0xFF2196F3)),fairy(童话故事,,Color(0xFFE91E63)),scifi(科幻故事,,Color(0xFF9C27B0)),animal(动物故事,,Color(0xFF4CAF50)),mystery(侦探故事,,Color(0xFFFF9800)),friendship(友情故事,,Color(0xFF00BCD4));finalStringlabel;finalStringemoji;finalColorcolor;}3.2 CharacterType 枚举enumCharacterType{hero(主角,,Color(0xFFF44336)),helper(助手,,Color(0xFF4CAF50)),villain(反派,,Color(0xFF9C27B0)),friend(朋友,,Color(0xFF2196F3)),pet(宠物,,Color(0xFFFF9800)),wise(智者,,Color(0xFF00BCD4));finalStringlabel;finalStringemoji;finalColorcolor;}3.3 StoryCharacter 模型classStoryCharacter{finalStringid;// 唯一标识finalStringname;// 角色名称finalCharacterTypetype;// 角色类型finalStringemoji;// 角色形象finalStringtrait;// 角色特点finalColorcolor;// 主题颜色}3.4 StoryBranch 模型classStoryBranch{finalStringid;// 唯一标识finalStringtext;// 情景描述finalStringchoiceA;// 选项AfinalStringchoiceB;// 选项BfinalStringresultA;// 选择A的结果finalStringresultB;// 选择B的结果finalStringemoji;// 情景插图}3.5 StoryBook 模型classStoryBook{finalStringid;// 唯一标识finalStringtitle;// 故事标题finalStoryThemetheme;// 故事主题finalListStoryCharactercharacters;// 角色列表finalListStoryPagepages;// 页面列表finalDateTimecreatedAt;// 创建时间finalStringcoverEmoji;// 封面插图}3.6 StoryPage 模型classStoryPage{finalStringcontent;// 页面内容finalStringemoji;// 页面插图finalint pageNumber;// 页码}四、核心功能实现4.1 创作流程控制class_StoryCreationPageStateextendsStateStoryCreationPage{int _currentStep0;// 当前步骤StoryTheme?_selectedTheme;// 选定主题finalListStoryCharacter_characters[];// 角色列表finalListStoryPage_pages[];// 页面列表void_nextStep(){// 验证当前步骤if(_currentStep0_selectedThemenull){// 提示选择主题return;}if(_currentStep1_characters.isEmpty){// 提示添加角色return;}if(_currentStep2_pages.isEmpty){// 提示创建故事return;}// 进入下一步或完成if(_currentStep3){setState(()_currentStep);}else{_completeStory();}}}4.2 剧情分支生成StoryBranch_generateStoryBranch(){finalbranches[StoryBranch(text:主角来到了一个分岔路口...,choiceA:向左走,choiceB:向右走,resultA:左边是一片神秘的森林...,resultB:右边是一条小溪...,emoji:️,),// 更多分支...];returnbranches[Random().nextInt(branches.length)];}4.3 分支选择处理void_selectBranch(StoryBranchbranch,bool isChoiceA){setState((){_pages.add(StoryPage(content:isChoiceA?branch.resultA:branch.resultB,emoji:branch.emoji,pageNumber:_pages.length1,));});}4.4 故事完成处理void_completeStory(){finalbookStoryBook(id:DateTime.now().millisecondsSinceEpoch.toString(),title:_titleController.text,theme:_selectedTheme!,characters:_characters,pages:_pages,createdAt:DateTime.now(),coverEmoji:_pages.isNotEmpty?_pages.first.emoji:,);widget.onComplete(book);Navigator.pop(context);}五、界面设计5.1 页面结构页面功能设计要点首页快速入口和最近创作渐变背景 横向滚动故事书架管理所有故事书网格布局 封面展示创作工坊创作流程引导步骤卡片 一键开始创作页面分步创作流程步骤指示 表单输入阅读页面故事书阅读翻页效果 页码指示5.2 创作流程设计步骤内容交互方式步骤1选择故事主题卡片选择步骤2设定故事角色弹窗表单步骤3编写故事剧情分支选择步骤4完成创作标题输入 预览5.3 配色方案元素颜色值用途主色调#E91E63品牌色、按钮背景渐变#FCE4EC → #F48FB1首页背景卡片背景#FFFFFF内容卡片主题色各主题独立颜色主题区分六、动画效果6.1 浮动动画_floatControllerAnimationController(vsync:this,duration:constDuration(seconds:3),)..repeat(reverse:true);// 往返浮动效果6.2 动画应用动画类型效果描述应用场景浮动动画上下缓慢浮动开始创作按钮渐变背景多色渐变过渡页面背景页面切换索引堆栈切换步骤切换七、运行与调试7.1 运行命令# 运行应用flutter run-dharmonyos lib/main_story_cocreation.dart# 代码分析flutter analyze lib/main_story_cocreation.dart# 构建HAP包flutter build hap--targetlib/main_story_cocreation.dart7.2 调试要点调试项检查内容解决方案创作流程步骤切换是否正常验证 _currentStep 逻辑角色添加角色数据是否正确检查表单输入故事保存故事书是否正确保存验证 onComplete 回调八、扩展方向8.1 功能扩展扩展功能实现思路技术要点真实插图AI生成插图图像生成API语音朗读故事语音播放TTS语音合成数据持久化保存故事数据SharedPreferences云端同步多设备同步云存储服务打印功能生成PDF打印PDF生成库模板系统预设故事模板模板配置文件8.2 内容扩展扩展项优化方案预期效果更多主题增加故事主题更丰富的选择分支深度多层剧情分支更复杂的故事角色互动角色对话系统更生动的剧情九、使用场景9.1 亲子互动时光家长可以在睡前或周末和孩子一起使用本应用创作故事。通过讨论故事主题、设计角色、选择剧情走向增进亲子互动培养孩子的想象力和表达能力。9.2 幼儿园教学活动幼儿园老师可以将本应用作为创意写作教学的辅助工具引导孩子们一起创作班级故事培养团队合作精神和创造力。9.3 儿童生日礼物家长可以将和孩子一起创作的故事书打印出来作为独特的生日礼物或纪念品记录孩子的成长和想象力。十、总结亲子故事共创应用通过完整的创作流程为家长和孩子提供了一个共同创作故事的平台。应用采用Flutter框架开发使用分步骤引导的方式让创作过程简单有趣。核心亮点包括主题丰富6种故事主题满足不同喜好角色定制6种角色类型自由设定形象和特点分支剧情双选项分支系统故事走向由你决定插图配图Emoji表情插图生动有趣故事书架管理所有创作的故事随时回顾分享导出支持打印和分享留下美好回忆该应用为亲子互动提供了一个创意平台让家长和孩子在共同创作中增进感情培养孩子的创造力和表达能力留下珍贵的亲子时光记忆。