孩子睡前要听故事这大概是每个带娃家长的“必修课”。可市面上的故事App要么会员收费要么广告满天飞要么只能在一台设备上跑换手机就得重新下载、重新找资源。我自己动手把“免费少儿故事播放”这个小项目做了出来技术栈选了Flutter顺手把鸿蒙也适配上了。这篇就聊聊整个过程怎么定位需求、怎么选型、怎么处理播放器和鸿蒙适配、踩了哪些坑以及最终怎么把“陪伴孩子快乐成长”落到实处。如果你也想做一个跨平台的小应用或者正被Flutter与鸿蒙的兼容问题折腾这篇应该能给你不少实在的参考。1. 项目定位免费少儿故事播放到底要解决什么问题1.1 需求从哪来先说这个项目是怎么来的。家里孩子三岁多每天晚上都要听故事而且经常是同一个故事反复听。我一开始是用手机自带音乐App收藏几个音频但问题很快冒出来要么播放列表混乱要么切到后台后不小心碰一下广告就跳到别的地方要么换到平板或者老人手机上收藏夹根本不互通。所以这个项目的本质需求非常朴素做一个孩子能自己点开就播、家长能放心给TA用的故事播放器。它不需要花哨的社交功能不需要推荐算法甚至不需要登录。要的就是内容尽量免费、操作足够简单、全家各种设备都能装。“免费少儿故事播放”这个标题里我最看重“免费”和“陪伴”两个词。“免费”不只是价格问题而是不想让家长在哄睡场景下还要面对付费墙和广告倒计时“陪伴”则是要求应用在听感、界面、稳定性上都适合亲子场景——不是把一堆视频塞给孩子而是提供一个安静、干净、能反复播放的角落。1.2 功能拆解一个“陪孩子听故事”的最小闭环把需求拆开核心功能其实就四块故事内容、列表展示、播放控制、家长控制。故事内容来源可以是公有领域童话、自己录制的故事、创作者授权免费发布的音频。这个项目里我用了一部分经典童话的中文朗读音频再配上自制封面图。列表展示按年龄段、故事主题、时长分成几个分类孩子能通过大图标进入家长也可以按关键词搜索。播放控制上一首、下一首、暂停、拖动进度、定时关闭这是刚需。特别是定时关闭家长设置15分钟或30分钟孩子听着听着就能睡着不用怕整夜播放。家长控制包括儿童锁、锁屏下继续播放、夜间模式、仅Wi-Fi下载缓存。一旦孩子自己点开App不会误触到设置项。这四个模块看起来简单但每一步都有不少细节。后面我会逐个展开。2. 技术选型为什么是Flutter加鸿蒙2.1 Flutter跨平台的核心优势市面上跨平台方案很多React Native、uni-app、Flutter、Kotlin Multiplatform。我最终选Flutter首先是UI一致性和渲染性能。Flutter是自绘引擎图文混排、圆角卡片、自定义动画在所有平台上渲染结果基本一致不会出现同一套样式在安卓和iOS上差出几个像素的情况。其次对于这种以音频播放为主、界面交互并不复杂的应用Flutter的开发效率非常高。一套Dart代码能同时维护Android、iOS、桌面而且热重载非常香。我在调故事列表的卡片阴影和颜色时几乎都是改两行代码直接看效果不用重新构建。还有一点很重要Flutter生态里音频播放、本地存储、路径处理等插件都相对成熟。虽然部分插件对鸿蒙的适配还不完整但可以通过自研Channel快速补齐。这一点在后面的鸿蒙适配章节我会专门说。2.2 鸿蒙适配的来龙去脉为什么选“Flutter 鸿蒙开发”这个组合因为家里除了手机还有一台鸿蒙系统的平板。我希望同一个安装包、同一套代码能在不同系统上都跑起来不然每次都要维护两套逻辑对个人开发者来说太累了。当前HarmonyOS生态对Flutter的支持主要有两条路一条是围绕OpenHarmony的开源Flutter适配分支另一条是华为官方在DevEco生态里不断补齐的能力。实际操作中需要先确认自己手上的Flutter SDK是否支持构建HAP包。我记得比较新的Flutter版本已经能通过社区维护的ohos分支执行flutter build hap最终产物可以直接给DevEco Studio或华为应用市场使用。但适配不是“换个目标平台就能跑”。Flutter插件层的老大难问题在这里体现得特别明显很多纯Dart包可以直接用凡是涉及原生能力的插件比如音频播放、系统音量、通知栏控制都需要在鸿蒙侧有对应的OpenHarmony原生实现。如果插件没有适配就要自己写Platform Channel。2.3 和uni-app、原生开发怎么取舍如果你也纠结要不要用Flutter可以看看我当时的对比过程。uni-app优点是国内开发习惯友好、Vue语法上手快但UI渲染在复杂自定义场景下不如Flutter稳定而且鸿蒙端的支持也是近两年才逐步加强的。纯原生开发Android一套、iOS一套、鸿蒙再一套一个人做完这个项目可能头发先没了。尤其是鸿蒙的ArkTS和ArkUI虽然很好但为了一个小工具额外维护一套代码划不来。Flutter核心业务逻辑一次编写遇到平台差异用Channel隔离是目前最适合“个人开发者维护多端小应用”的方案。当然Flutter也有缺点包体积偏大启动速度略慢于原生。但对于故事播放器这种不是极致性能需求的应用完全能接受。启动时加一个简单的品牌页孩子也不会觉得慢。2.4 开发环境搭建细节这里记录一下我实际搭建的流程尽量不绕弯子安装Flutter SDK建议使用稳定版分支然后配置环境变量。如果你下载缓慢可以用镜像地址这个在官方文档里就能找到。安装DevEco Studio并安装对应的OpenHarmony / HarmonyOS SDK。用flutter doctor检查确认Flutter能识别到本机的Android工具链和鸿蒙工具链。如果鸿蒙工具链没有被识别需要手动指定SDK路径。创建一个Flutter项目然后通过命令行或IDE切换/配置ohos支持。在pubspec.yaml里添加依赖。注意不同Flutter版本对应的鸿蒙支持差异很大建议先跑通官网的示例工程再往里面加自己的代码。这套环境搭建比纯Android或纯鸿蒙要多花半天时间但好处是配好之后后续迭代很顺畅。3. 核心功能设计与实现把“播放”做成一件简单的事3.1 整体功能架构我把项目分成了三层数据层、业务逻辑层、UI层。数据层本地JSON文件描述所有故事信息包括标题、分类、音频路径、封面路径、时长。这样不需要服务器应用内置一批免费故事后续更新也方便。业务逻辑层负责故事列表的过滤、播放器状态管理、定时关闭逻辑、缓存进度。用简单的Provider或者ChangeNotifier就能搞定没必要引入重型状态管理框架。UI层面向儿童的大按钮、大色块、卡通风格。家长控制区单独用一个Tab收起避免孩子乱点。为什么不用远程接口因为“免费少儿故事播放”的核心是稳定、离线可用。联网加载内容虽然灵活但孩子如果在车里、在信号不好的地方音频缓存不下来体验就很糟。内置一批高质量的免费故事加上按需缓存是最稳妥的方案。3.2 音频播放模块的实现音频播放是这个项目的技术核心。Flutter生态里audioplayers和just_audio都很常用。just_audio功能强支持倍数播放、音频焦点、边下边播但API相对复杂audioplayers上手快但流式播放和后台播放处理需要自己多调一调。我做这个项目时考虑到故事播放不需要复杂音效就用audioplayers做了一层封装暴露给上层的方法很简单play、pause、seek、stop、setVolume。这里有个关键点面向儿童的应用播放器的后台运行能力很重要。孩子退出App或者锁屏后故事不能中断。在Android上需要申请前台服务权限在鸿蒙上则需要把音频播放放到对应的Ability或Service里持续运行。如果只靠Dart端的AudioPlayer对象很可能在应用切到后台后被杀掉。我的做法是在原生侧创建一个持久化的播放服务Dart通过EventChannel接收播放状态变化通过MethodChannel下发播放指令。音频播放还有一个很容易被忽略的细节音量增益处理。不同故事音频的响度差异很大有些老录音明显偏小。我在播放器里做了一个简单的动态增益把每个音频的初始音量归一化到可接受范围。当然这个功能不是必须的但做出来之后孩子不用在一个故事结束、下一个故事开始时频繁调音量体验提升明显。3.3 UI层设计儿童化与易用性儿童UI设计和普通App很不一样。普通App讲究信息密度恨不得一屏塞满所有入口儿童应用恰恰相反要有大面积的留白、高对比度的色块、极大的点击区域。故事列表我用的是一张大卡片瀑布流每个故事一张封面封面是一个圆形或圆角方形的大图标题字体用偏粗的圆体。分类栏设计成横向滚动的彩色按钮比如“童话”“成语”“睡前”“自然”。孩子不需要识字只看颜色和图标就能找到想听的大类。播放页的按钮做得特别大暂停/播放按键至少有80像素高上一首、下一首必须间隔足够大防止误触。操作反馈也要符合儿童预期。每按一个按钮不仅有声音变化还有视觉反馈比如按钮放大缩小动画、故事封面轻微旋转。Flutter做这些动画非常顺手一个AnimatedScale或AnimatedRotation就能搞定。另外家长控制区的入口我放在了“我的”Tab最底部而且需要长按才能进入。这样孩子自己玩的时候不会随便跳到设置页。夜间模式做得也很克制18点之后进入暗色背景并自动降低整体亮度但不会强制关闭动画以免孩子觉得“坏了”。3.4 家长控制与本地缓存说几个实用的家长控制功能定时关闭提供15、30、60分钟三档。实现逻辑很简单启动一个Timer到期调用pause并退出播放页。但要注意定时关闭之后不能影响App其他功能比如家长还能继续操作列表。儿童锁开启后隐藏返回按钮和系统导航栏只保留播放页内的大按钮。需要手势组合才能退出比如同时长按播放键和下一首键3秒。下载缓存在Wi-Fi环境下家长可以点击下载按钮把故事音频保存到本地。我用path_provider获取缓存目录结合网络请求库做分片写入。这样孩子在外面也能听不会消耗家长流量。缓存策略上我踩过一个小坑同一个音频文件在iOS和Android上的缓存目录路径规则完全不一样鸿蒙又有一套自己的沙箱路径规则。最稳妥的做法是不要直接存绝对路径而是通过plugin的getApplicationSupportDirectory获取基础目录再自己拼文件名保证各端行为一致。4. 实操过程从零跑通第一个跨平台播放页面4.1 项目创建与目录结构我用的命令大致是这样flutter create story_player创建完项目后目录结构和普通Flutter项目一样。如果你要适配鸿蒙在支持ohos的Flutter版本下项目里会多出一个ohos目录里面是OpenHarmony工程文件。Android的配置还是在android目录iOS在ios目录。我的pubspec.yaml核心依赖如下示意dependencies: flutter: sdk: flutter audioplayers: ^5.0.0 provider: ^6.0.0 path_provider: ^2.0.0 shared_preferences: ^2.0.0这里想提醒一句不要盲目用最新版本。先确认插件是否支持鸿蒙再决定版本。如果某个插件一直编译不过可以去看看它的GitHub Release说明确认ohos平台是否有对应实现。4.2 代码走通故事列表与播放页先定义故事模型class Story { final String id; final String title; final String category; final String audioAsset; final String coverAsset; final int durationSeconds; const Story({ required this.id, required this.title, required this.category, required this.audioAsset, required this.coverAsset, required this.durationSeconds, }); factory Story.fromJson(MapString, dynamic json) { return Story( id: json[id], title: json[title], category: json[category], audioAsset: json[audioAsset], coverAsset: json[coverAsset], durationSeconds: json[durationSeconds], ); } }列表页用GridView.builder这里只展示核心逻辑GridView.builder( padding: EdgeInsets.all(16), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.9, spacing: 16, ), itemCount: stories.length, itemBuilder: (context, index) { final story stories[index]; return StoryCard( story: story, onTap: () { Navigator.push( context, MaterialPageRoute( builder: (_) PlayerPage(story: story, playlist: stories), ), ); }, ); }, )播放页的核心是音频播放器封装类我大致会这样写class StoryPlayerController extends ChangeNotifier { final AudioPlayer _player AudioPlayer(); bool _isPlaying false; Duration _position Duration.zero; Duration _totalDuration Duration.zero; StoryPlayerController() { _player.onPositionChanged.listen((pos) { _position pos; notifyListeners(); }); _player.onDurationChanged.listen((dur) { _totalDuration dur; notifyListeners(); }); _player.onPlayerStateChanged.listen((state) { _isPlaying state PlayerState.playing; notifyListeners(); }); } Futurevoid playStory(String url) async { await _player.stop(); await _player.play(UrlSource(url)); } Futurevoid togglePlay() async { if (_isPlaying) { await _player.pause(); } else { await _player.resume(); } } Futurevoid seekTo(Duration position) async { await _player.seek(position); } override void dispose() { _player.dispose(); super.dispose(); } }注意上面这段代码是个示意不同版本的audioplayersAPI有差异。真正开发时请以你锁定的插件版本文档为准。4.3 鸿蒙平台打包与调试当我准备在鸿蒙设备上调试时执行了类似这样的操作flutter build hap --release不过实际操作中经常需要先解决SDK路径、签名配置等问题。鸿蒙打包比Android多一个签名步骤需要在DevEco Studio里生成p12和p7b文件并在ohos工程里配置。应用市场要求正式包使用发布证书本地调试则可以使用自动签名。如果没有鸿蒙真机能不能调试能但分情况。界面布局和基本交互可以用DevEco Studio的Previewer预览但不推荐只靠预览器验证播放功能因为音频播放、后台任务、通知栏这些能力高度依赖真机系统行为。如果有条件最好借一台鸿蒙手机或平板做完整回归。没有设备的同学可以考虑使用云真机或模拟器至少先把安装和启动流程跑通。4.4 安卓原生项目嵌入Flutter页面的扩展思路有人可能不是从零创建Flutter项目而是想把Flutter页面嵌入到已有的Android或鸿蒙原生App里。这个方向我后来也试过在原生App里放一个“故事播放”入口点击后拉起Flutter播放页。在Android侧核心思路是用FlutterEngine和FlutterFragment预先创建并缓存FlutterEngine避免每次进入页面都在初始化。用FlutterFragment.withCachedEngine(engineId)展示Flutter页面。通过MethodChannel让原生侧和Flutter侧互相传递数据比如原生传入当前用户选择的主题分类。这个方案的坑在于内存管理。如果每次进入都创建一个新Engine很快内存就不够用。所以一定要复用Engine并合理处理页面销毁时的引用关系。在鸿蒙侧也有类似的承载方案思路一致但API名称和生命周期不同需要看具体版本的SDK文档。5. 常见问题与排查技巧实录5.1 Flutter环境与插件适配问题很多人卡在第一步Flutter装了DevEco Studio也装了但flutter doctor看不到鸿蒙工具链。这通常是环境变量没配对。你要把DevEco Studio的command-line-tools/sdk路径明确暴露给Flutter工具再重新打开终端执行flutter doctor。插件适配是最常踩的坑。比如你想用某个音频插件它在Android和iOS上很完美但到鸿蒙就编译报错。我的处理顺序是先看插件是否有opengoHarmony或ohos的实现目录。如果没有去插件仓库的issue里搜是否有人提交过鸿蒙PR。再不行只能自己写一个Platform Channel的桥接实现。那段时间我经常在Dart端和鸿蒙原生端之间传事件EventChannel真的帮了大忙。像是播放状态变化、进度更新、音量变化用EventChannel推给Flutter侧效率很高逻辑也清晰。5.2 Navigator切换页面后状态丢失Flutter里做Tab切换时我一开始遇到的是页面状态丢失。明明列表滚动到一半切出去再回来列表又回到了顶部。这是因为页面被回收或者Tab切换时没有保留状态。解决办法是给列表加上PageStorageKey或者用IndexedStack把所有Tab一次性构建出来然后用Visibility控制显隐。这样列表状态和播放状态都不会丢。我当时为了省事直接用了IndexedStack虽然会多占用一点内存但故事列表本来数据量不大完全可以接受。还有一个容易忽略的点点击故事进入播放页再从播放页返回列表时如果列表状态还在但高亮的“当前播放”标签没了。处理方式是全局维护一个“当前故事ID”列表页根据这个ID重新渲染高亮。5.3 打包问题与性能优化有段时间我在Android上打包总是报could not close之类的Gradle异常后来发现是gradle缓存目录权限问题。清理办法很简单删除项目根目录下的.gradle目录然后重新flutter clean、flutter pub get再打包。这个问题遇到别慌不是代码问题多数是构建环境脏了。Flutter打包慢也是一个绕不开的点。为了提效我做了两件事一是拆分Android ABI只打包arm64-v8a因为我主要给自家设备和华为应用市场用二是开启混淆压缩但保留Dart的符号映射避免线上崩溃时看不到堆栈。如果你在iOS上遇到Xcode27环境下很多Flutter包报“版本低”通常不是单个包的问题而是Flutter SDK版本太旧。建议第一步先升级Flutter版本再把全部依赖统一升到匹配版本最后执行pod repo update。别单独去升某一个插件依赖冲突会让人更崩溃。5.4 鸿蒙专项排查鸿蒙设备上我遇到过几类问题播放音频没有声音检查是否申请了音频播放权限以及鸿蒙是否把音频焦点当成需要主动处理的权限。应用退到后台播放中断在鸿蒙上需要配置短音/长音类型并保证对应的Ability在后台不会被冻结。直接用系统参数或服务声明的方式解决。通知栏没有播放控制这类功能需要鸿蒙自己的元能力配合单纯依赖Flutter插件是不够的得写一段原生代码把媒体信息同步到系统播控中心。鸿蒙适配最考验人的不是写代码而是排查链路。因为有些日志输出在Dart侧看不到必须去DevEco Studio里看系统级日志。我建议在原生侧加一组关键日志通过EventChannel把调试信息回传给Flutter这样至少在真机上能快速看到播放器的状态变化。6. 免费内容合规与上线运营6.1 版权问题不能含糊“免费”不等于“随便用”。少儿音频的内容版权是大事我在选素材时只用了三类公有领域经典童话、自己录制或自己合成的朗读音频、明确授权免费商用/个人使用的音频素材。哪怕只是做给自家孩子用我也不想踩版权的坑更何况如果之后想上架应用市场版权审核是过不去的。如果你也想做免费故事库最稳妥的路线是自己录。找个安静的房间一支USB麦克风加上一点点降噪处理就能得到满意的音频。故事的语气、节奏反而是你的优势孩子会很喜欢父母参与制作的“专属故事”。6.2 隐私与儿童保护合规涉及儿童应用隐私保护比普通应用更严格。我的处理方式是不采集任何个人信息不要求注册登录不开启任何追踪统计音频只从本地资源或预先配置的URL播放。没账号、没实名、没定位这本身就是最省心的合规方案。应用描述里要写清楚面向的人群、是否有内购、是否包含广告。我这个项目是纯免费、无广告、无内购所以审核上反而少了很多麻烦。当然如果要上架儿童类目录可能还需要按要求提供隐私政策链接和联系方式每个平台的政策不一样上架前务必逐条对照。6.3 上架与迭代计划鸿蒙版本上架华为应用市场除了常规的开发者认证和隐私声明外还要注意图标和截图尺寸。一个只有一种尺寸的图标往往不够最好按照市场要求的规格一次性生成全套。版本迭代上我计划每两周加一批新故事同时在设置页提供“检查更新”的提示。由于没有服务器故事更新可以通过应用内下载新的音频压缩包实现或者发布新版本时把资源打进包里。个人维护项目初期建议直接随版本发布资源逻辑更简单。7. 写给自己与同样带娃开发的你这个项目做到现在最大的感受不是技术多难而是“小而美”的事情坚持下来也不容易。从选定Flutter、适配鸿蒙到处理播放器后台、儿童锁、离线缓存每一步都踩了不少坑但没有一个坑是真正过不去的。如果你也想给自家孩子做类似的工具我的建议是先别追求功能多先把“打开App点到故事开始播放”这条路走通再用流量和后台播放两个场景倒逼自己优化最后再考虑鸿蒙、iOS这些平台适配。技术方案可以慢慢换但孩子对故事的热爱不会等你。最后分享一个小技巧我在开发过程中会把所有音频素材放在一个统一的目录里文件名就叫故事ID_标题。这看似不起眼却能让你在处理播放列表、缓存路径和日志排查时省下大量时间。真正让孩子快乐成长的项目往往就是这些打磨过的小细节堆出来的。