01. Flutter 鸿蒙实战 01会说话的相册项目架构拆解从目录、依赖、业务模块和鸿蒙工程开始先看清一个完整 App 的骨架。项目定位talking_album不是一个只展示页面的 Flutter Demo而是一个已经接入后端、登录态、图片上传、故事生成、语音播放、视频播放和鸿蒙打包链路的客户端。pubspec.yaml里的描述是“会说话的相册 Flutter HarmonyOS 客户端”项目目标也很清楚把 Web 手机端的“会说话的相册”迁移到 Flutter并让它可以运行在 HarmonyOS/OpenHarmony 工程里。项目的入口非常轻lib/main.dart只负责启动应用importpackage:flutter/material.dart;importapp/app.dart;voidmain(){runApp(constTalkingAlbumApp());}真正的应用初始化放在lib/app/app.dart。这里创建ApiClient、AuthController再通过AuthScope注入到整棵组件树。这样的好处是业务页面不用到处 new 网络客户端也不用把 token 状态层层传递。class_TalkingAlbumAppStateextendsStateTalkingAlbumApp{latefinalApiClient_apiClient;latefinalAuthController_authController;overridevoidinitState(){super.initState();_apiClientApiClient();_authControllerAuthController(apiClient:_apiClient,sessionStore:SharedPreferencesSessionStore(),);_authController.initialize();}}目录分层项目目录按“应用入口、通用能力、业务功能、鸿蒙宿主”分层lib/ ├─ app/ 应用入口、路由表 ├─ core/ │ ├─ config/ API 地址等配置 │ ├─ network/ ApiClient、错误转换 │ ├─ speech/ 本地讲故事通道 │ ├─ theme/ 颜色和主题 │ └─ utils/ JSON 辅助 └─ features/ ├─ auth/ 登录、注册、会话 ├─ home/ 首页 ├─ upload/ 照片上传 ├─ stories/ 故事集、详情、语音、视频 ├─ map/ 家族地图 ├─ anniversary/ 纪念日 ├─ family/ 家人列表 ├─ notifications/ 通知中心 ├─ profile/ 个人资料 └─ shell/ 顶部栏和底部导航ohos/是 Flutter 鸿蒙宿主工程不是临时目录。里面包含EntryAbility.ets、GeneratedPluginRegistrant.ets、module.json5、资源文件和 HAP 构建产物。项目能跑在鸿蒙上关键就在这套宿主工程和 Flutter OpenHarmony 工具链的配合。鸿蒙侧工程ohos/entry/src/main/ets/entryability/EntryAbility.ets继承FlutterAbility并注册 Flutter 插件import{FlutterAbility,FlutterEngine}fromohos/flutter_ohos;import{GeneratedPluginRegistrant}from../plugins/GeneratedPluginRegistrant;exportdefaultclassEntryAbilityextendsFlutterAbility{configureFlutterEngine(flutterEngine:FlutterEngine){super.configureFlutterEngine(flutterEngine)GeneratedPluginRegistrant.registerWith(flutterEngine)}}插件注册文件里能看到项目实际用到的鸿蒙适配插件flutterEngine.getPlugins()?.add(newAudioplayersPlugin());flutterEngine.getPlugins()?.add(newImagePickerPlugin());flutterEngine.getPlugins()?.add(newSharedPreferencesPlugin());flutterEngine.getPlugins()?.add(newVideoPlayerPlugin());这说明项目并不是只用 Flutter 画 UI还用了鸿蒙侧插件能力本地存储、图片选择、音频播放和视频播放都要靠 OpenHarmony 适配包。依赖选择pubspec.yaml中最关键的依赖是这些shared_preferences_ohos:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitpath:packages/shared_preferences/shared_preferences_ohosimage_picker:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitpath:packages/image_picker/image_pickeraudioplayers:git:url:https://gitee.com/openharmony-sig/flutter_audioplayers.gitref:br_audioplayers-v6.1.0_ohospath:packages/audioplayersvideo_player:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitref:br_video_player-v2.9.2_ohospath:packages/video_player/video_player这类依赖不能随便替换成 pub.dev 上的普通版本。普通 Flutter 插件未必带ohos实现代码能在 Android 跑不代表能在鸿蒙工程里构建。配图安排完成这层结构梳理后后面的登录会话、网络层、上传、故事、音频、视频、地图和 HAP 构建都能在同一套工程骨架里找到对应位置。扩展拆解进一步拆解为什么这个架构适合继续扩展这个项目的架构不是为了“看起来分层”而是为了后续功能继续增长。app层只做应用装配core层放网络、主题、配置、语音通道features按业务拆分。这样新增功能时开发者能快速判断代码应该放哪里如果是业务页面进入features如果是所有页面都要用的能力进入core如果是启动、登录拦截、主题、本地化进入app。例如“家人列表”不是写在首页里而是单独放到features/family。首页只提供入口真正的列表、邀请、权限、管理菜单都在自己的模块内。这个边界清楚后首页不会随着功能增加变成一个巨大的文件。features/home 负责首页展示和入口跳转 features/family 负责家人列表、邀请和管理 features/stories 负责故事列表、详情、音频、视频 features/upload 负责照片选择、上传和上传列表管理另一个关键点是ohos工程已经进入项目结构。Flutter 代码负责页面和业务逻辑但鸿蒙侧仍然要处理 EntryAbility、权限、插件注册和 HAP 构建。写 Flutter 鸿蒙项目时不能只看lib也要把ohos当作正式源码的一部分。管理另一个关键点是 ohos 工程已经进入项目结构。Flutter 代码负责页面和业务逻辑但鸿蒙侧仍然要处理 EntryAbility、权限、插件注册和 HAP 构建。写 Flutter 鸿蒙项目时不能只看 lib也要把 ohos 当作正式源码的一部分。
01-Flutter 鸿蒙实战 01：会说话的相册项目架构拆解
01. Flutter 鸿蒙实战 01会说话的相册项目架构拆解从目录、依赖、业务模块和鸿蒙工程开始先看清一个完整 App 的骨架。项目定位talking_album不是一个只展示页面的 Flutter Demo而是一个已经接入后端、登录态、图片上传、故事生成、语音播放、视频播放和鸿蒙打包链路的客户端。pubspec.yaml里的描述是“会说话的相册 Flutter HarmonyOS 客户端”项目目标也很清楚把 Web 手机端的“会说话的相册”迁移到 Flutter并让它可以运行在 HarmonyOS/OpenHarmony 工程里。项目的入口非常轻lib/main.dart只负责启动应用importpackage:flutter/material.dart;importapp/app.dart;voidmain(){runApp(constTalkingAlbumApp());}真正的应用初始化放在lib/app/app.dart。这里创建ApiClient、AuthController再通过AuthScope注入到整棵组件树。这样的好处是业务页面不用到处 new 网络客户端也不用把 token 状态层层传递。class_TalkingAlbumAppStateextendsStateTalkingAlbumApp{latefinalApiClient_apiClient;latefinalAuthController_authController;overridevoidinitState(){super.initState();_apiClientApiClient();_authControllerAuthController(apiClient:_apiClient,sessionStore:SharedPreferencesSessionStore(),);_authController.initialize();}}目录分层项目目录按“应用入口、通用能力、业务功能、鸿蒙宿主”分层lib/ ├─ app/ 应用入口、路由表 ├─ core/ │ ├─ config/ API 地址等配置 │ ├─ network/ ApiClient、错误转换 │ ├─ speech/ 本地讲故事通道 │ ├─ theme/ 颜色和主题 │ └─ utils/ JSON 辅助 └─ features/ ├─ auth/ 登录、注册、会话 ├─ home/ 首页 ├─ upload/ 照片上传 ├─ stories/ 故事集、详情、语音、视频 ├─ map/ 家族地图 ├─ anniversary/ 纪念日 ├─ family/ 家人列表 ├─ notifications/ 通知中心 ├─ profile/ 个人资料 └─ shell/ 顶部栏和底部导航ohos/是 Flutter 鸿蒙宿主工程不是临时目录。里面包含EntryAbility.ets、GeneratedPluginRegistrant.ets、module.json5、资源文件和 HAP 构建产物。项目能跑在鸿蒙上关键就在这套宿主工程和 Flutter OpenHarmony 工具链的配合。鸿蒙侧工程ohos/entry/src/main/ets/entryability/EntryAbility.ets继承FlutterAbility并注册 Flutter 插件import{FlutterAbility,FlutterEngine}fromohos/flutter_ohos;import{GeneratedPluginRegistrant}from../plugins/GeneratedPluginRegistrant;exportdefaultclassEntryAbilityextendsFlutterAbility{configureFlutterEngine(flutterEngine:FlutterEngine){super.configureFlutterEngine(flutterEngine)GeneratedPluginRegistrant.registerWith(flutterEngine)}}插件注册文件里能看到项目实际用到的鸿蒙适配插件flutterEngine.getPlugins()?.add(newAudioplayersPlugin());flutterEngine.getPlugins()?.add(newImagePickerPlugin());flutterEngine.getPlugins()?.add(newSharedPreferencesPlugin());flutterEngine.getPlugins()?.add(newVideoPlayerPlugin());这说明项目并不是只用 Flutter 画 UI还用了鸿蒙侧插件能力本地存储、图片选择、音频播放和视频播放都要靠 OpenHarmony 适配包。依赖选择pubspec.yaml中最关键的依赖是这些shared_preferences_ohos:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitpath:packages/shared_preferences/shared_preferences_ohosimage_picker:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitpath:packages/image_picker/image_pickeraudioplayers:git:url:https://gitee.com/openharmony-sig/flutter_audioplayers.gitref:br_audioplayers-v6.1.0_ohospath:packages/audioplayersvideo_player:git:url:https://gitcode.com/openharmony-tpc/flutter_packages.gitref:br_video_player-v2.9.2_ohospath:packages/video_player/video_player这类依赖不能随便替换成 pub.dev 上的普通版本。普通 Flutter 插件未必带ohos实现代码能在 Android 跑不代表能在鸿蒙工程里构建。配图安排完成这层结构梳理后后面的登录会话、网络层、上传、故事、音频、视频、地图和 HAP 构建都能在同一套工程骨架里找到对应位置。扩展拆解进一步拆解为什么这个架构适合继续扩展这个项目的架构不是为了“看起来分层”而是为了后续功能继续增长。app层只做应用装配core层放网络、主题、配置、语音通道features按业务拆分。这样新增功能时开发者能快速判断代码应该放哪里如果是业务页面进入features如果是所有页面都要用的能力进入core如果是启动、登录拦截、主题、本地化进入app。例如“家人列表”不是写在首页里而是单独放到features/family。首页只提供入口真正的列表、邀请、权限、管理菜单都在自己的模块内。这个边界清楚后首页不会随着功能增加变成一个巨大的文件。features/home 负责首页展示和入口跳转 features/family 负责家人列表、邀请和管理 features/stories 负责故事列表、详情、音频、视频 features/upload 负责照片选择、上传和上传列表管理另一个关键点是ohos工程已经进入项目结构。Flutter 代码负责页面和业务逻辑但鸿蒙侧仍然要处理 EntryAbility、权限、插件注册和 HAP 构建。写 Flutter 鸿蒙项目时不能只看lib也要把ohos当作正式源码的一部分。管理另一个关键点是 ohos 工程已经进入项目结构。Flutter 代码负责页面和业务逻辑但鸿蒙侧仍然要处理 EntryAbility、权限、插件注册和 HAP 构建。写 Flutter 鸿蒙项目时不能只看 lib也要把 ohos 当作正式源码的一部分。
