最近我把自己的观影记录从备忘录搬到了一个用 Flutter 写的鸿蒙小应用里,过程比我想象中顺利,也踩了不少文档里不会写的坑。说实话,现在一提到鸿蒙开发,大多数人第一反应就是 ArkTS,但 Flutter 在 OpenHarmony 上的适配进度,已经足够支撑一个完整的业务型应用实战了。这篇教程就以"观影记录账本"这个典型的小而美工具为例,把 Flutter 跨平台鸿蒙开发从环境搭建、数据设计到页面实现、真机调试的完整链路拆开揉碎讲清楚。无论你是刚接触 Flutter 的新手,还是已经在做跨平台应用、准备把业务延展到鸿蒙生态的开发者,这篇内容都能帮你少走几个来回。
我会尽量按实际开发顺序来讲,每步都解释清楚为什么要这样写、为什么这样设计,也会把我反复踩过的坑单拎出来说。毕竟这种“观影记录账本”类型的应用,功能边界很清晰:能记录片名、类型、观影日期、评分、短评,再按月或按类型做统计复盘,核心诉求就是快、轻、能在手机本地跑得稳。它没有复杂的后端依赖,正好是验证 Flutter 跨端能力的最佳场地。
1. 为什么我最终选了 Flutter 来做鸿蒙 App——跨平台适配现状
1.1 观影记录账本这种“小而美”工具,最看重什么
做工具类应用的都知道,这类产品拼的不是功能多,而是三个字:顺、稳、省。顺是指交互跟手,页面切换不能卡;稳是指数据不能丢,记录掉了比功能缺失更致命;省则指开发成本,个人开发者或者小团队根本没有资源为一个平台单独维护一套代码。
观影记录账本恰好把这三点全占了。它需要日期选择、评分滑杆、列表滚动、增删改查、简单的图表统计,几乎没有平台特有的 API 需求。这种应用如果用 ArkTS 从零写一套,那安卓和 iOS 版本就得另起炉灶,数据层逻辑写三遍,光维护就够呛。但如果全用原生安卓,又等于主动放弃了鸿蒙生态里的用户。
这就是 Flutter 的价值所在。一套 Dart 代码,通过 OpenHarmony 社区的适配层,可以直接构建出 HarmonyOS 应用。UI 渲染不走系统组件,而是 Flutter 自绘引擎自己画,所以跨平台的视觉一致性非常高。对观影记录这种偏表单、列表、卡片的界面来说,Flutter 的表现力完全够用,而且性能在真机上实测并不会比原生差太多。
1.2 Flutter 与鸿蒙当前的适配深度
先说结论:Flutter 跑鸿蒙已经不是“能不能跑”的问题,而是“跑到什么程度”的问题。官方提供的 Flutter SDK 分支里已经包含了 OpenHarmony 平台支持,你可以通过 Flutter 创建工程时指定平台参数来生成鸿蒙工程目录。底层的 Flutter 引擎编译产物能够直接在鸿蒙设备上运行,ArkTS 和 Flutter 页面也可以共存,也就是说你可以渐进式地在现有鸿蒙应用里嵌入 Flutter 模块。
不过要泼一盆冷水:适配最深的永远是核心引擎,第三方插件的鸿蒙支持要靠社区一家一家补。很多你在安卓上很熟悉的 pub 包,底层依赖的是 Android SDK 的 API,在鸿蒙工程里会直接编不过。所以选型时真要全程带着“这个包在鸿蒙能不能跑”的头脑,优先选纯 Dart 实现的包、或者官方已经标注支持 OpenHarmony 的包。我后面讲数据存储和路径处理时,会重点讲怎么避开插件不兼容的雷区。
简单总结:如果你手头正好有 Flutter 项目,想把鸿蒙作为新增的发布平台,这条路已经走得通,但要为“插件鸿蒙化”留出排期。如果是新项目,像我这次一样,从一开始就把鸿蒙当作一等平台来设计,反而更顺。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发环境落地:Flutter SDK、DevEco 与项目脚手架
2.1 安装 Flutter SDK 并开启 OpenHarmony 平台
这一步看起来基础,但很多新手卡在“明明装了 Flutter,项目里却看不到 ohos 目录”。原因是你本机的 Flutter 版本里没有启用 OpenHarmony 平台能力。官方的标准 Flutter SDK 目前把 OpenHarmony 当作一个实验特性,需要在命令行做一次标记开启。
环境准备阶段,我建议按这个顺序来:
- 安装最新稳定版 Flutter SDK,并配置好本机的
flutter命令。安装完成后先跑一遍flutter doctor,确保 Dart SDK、Android toolchain 这些基础项没有红叉。 - 执行
flutter config --enable-ohos,开启 OpenHarmony 平台支持。执行完可以再用flutter config查看一下当前配置,确认enable-ohos为 true。 - 开发鸿蒙应用还需要对应的 SDK 和 IDE。下载安装 DevEco Studio,它内置了 HarmonyOS SDK、模拟器管理和签名工具。安装完后在 DevEco 里确认 SDK 组件齐全。
这里插一句我在配置环境时的教训:环境变量的改动一定要重开终端再验证。很多朋友装完 Flutter 后在原终端里敲 flutter --version 报 command not found,就以为安装失败。其实 Flutter 的安装脚本在 PATH 里追加了配置,新开的终端才会读到。别在这个问题上耗掉半天时间。
另外,如果在安装依赖包时遇到下载慢或者超时的情况,常规做法是配置镜像环境变量,比如 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。这是国内开发环境的标准配置,配置完同样记得重启终端。
2.2 使用 DevEco Studio 完成工具链对齐
Flutter 构建鸿蒙应用时,实际上需要借助 DevEco 提供的鸿蒙构建工具链来生成 HAP 包。两者不是替代关系,而是协作关系。Flutter 负责 Dart 层代码和 UI 渲染,DevEco 负责鸿蒙工程结构、权限声明、签名打包。
写代码时可以继续用 VS Code 或 Android Studio 里的 Flutter 插件,但最终要到 DevEco Studio 里打开 ohos 目录,用 DevEco 的同步和构建能力去生成 HAP 安装包。这个工作流需要注意一个点:升级 Flutter SDK 后,建议也在 DevEco 里重新做个 Sync,否则两边的编译缓存可能对不上。
2.3 创建项目后的第一件事:改 pubspec 和 ohos 配置
用 flutter create --platforms=ohos 创建完项目,不要急着写业务代码,先检查两个地方。第一是 pubspec.yaml,确认 sdk 约束和依赖版本是否合理;第二是 ohos 目录下的模块配置文件,这里面声明了应用包名、图标、版本号等基础信息。
你可能会问,为什么要在 Flutter 项目里直接生成一个 ohos 目录,而不是像 Android 的 android 目录那样藏在后台。因为鸿蒙工程本身就是一个完整独立的应用工程,Flutter 只是其中依赖的一个模块。理解了这个结构,后面遇到“Flutter 代码改了,但鸿蒙包没更新”这种问题就不会慌,多半是需要重新构建 Flutter 产物,而不是动鸿蒙侧的东西。
3. 观影记录账本的数据模型与本地存储设计
3.1 一张表还是两张表:数据模型设计
观影记录账本的数据量不会太大,可能一个月几十条、一年几百条。很多人会犹豫要不要把“已看影片”和“想看清单”分成两张表。我的建议是:初期就用一张表,用状态字段区分。原因很简单,工具的“想看”和“已看”本质上是同一条影片记录在不同时间的两种状态,拆成两张表反而会在“标记为已看”时增加一次跨表操作。
我们定义这样一个数据模型:
- 影片名称:
title,TEXT - 上映年份:
year,INTEGER - 影片类型:
genre,TEXT - 观影日期:
watch_date,TEXT,存 ISO8601 格式的日期字符串 - 个人评分:
rating,REAL,范围 0~10 - 观影状态:
status,INTEGER,0 表示想看,1 表示已看,2 表示二刷 - 短评:
comment,TEXT - 创建时间:
created_at,TEXT - 主键:
id,INTEGER 自增
这套设计覆盖了 90% 的观影记录需求。如果你还想做“二刷记录”,不必新开表,直接在 status 里加一个枚举值即可。记录类应用最忌过度设计,能把增删改查做顺,体验就已经超过大多数竞品了。
3.2 sqflite 在鸿蒙上的落地细节
确定了模型,接下来要解决存储引擎的问题。Flutter 生态里最常用的本地数据库是 sqflite,但它的 Android 实现依赖系统 SQLite API。在鸿蒙上能不能跑,取决于社区的适配情况。坦白说,sqflite 在鸿蒙上的兼容目前已经有可用方案,但不同的小版本之间表现不太稳定,我曾遇到过数据库文件能创建、但查询时抛出底层异常的情况。
一个更稳妥的方案是在 Flutter 侧使用基于纯 Dart 实现的存储方案,比如 hive,它把数据以二进制对象的形式存在本地文件里,完全不依赖平台的原生数据库能力。这对于观影记录这种小型结构化数据来说非常适合。读写速度体感上不比原生 SQLite 差,序列化出的结构又天然适配 Dart 对象。
如果你想继续用 SQLite 语义,也可以把 sqflite_common_ffi 作为底层方案,它通过 FFI 方式调用 SQLite 引擎,同样绕开了插件平台适配的问题。我的建议是:个人项目优先 Hive,理由是省心;如果你确实需要复杂 SQL 查询、多表联查,那再用 sqflite 系并做好真机验证。
3.3 日期、评分和状态字段怎么存
日期用字符串存 ISO8601 格式(比如 2025-06-14)而不是时间戳,好处是可读性高、调试方便,排序时直接按字符串排序也符合时间顺序。做月份统计时可以用 substring(0, 7) 截取年月,非常方便。评分用 REAL 类型而不是 INTEGER,因为可以支持 8.5 分这类小数评分。状态字段用 INTEGER 而不是字符串,一是省空间,二是避免把 "1" 和 "已看" 这类字符串散落在代码各处,枚举统一管理更安全。
索引方面,如果记录量到了一两千条,建议给 watch_date 和 status 添加索引,会明显提升按月筛选和状态分类查询的速度。Hive 这类 NoSQL 方案没有传统索引概念,但可以通过 Box 的 key 组织和独立的索引 Box 实现同样的效果。我个人用下来,几百条记录完全感知不到性能差异,所以不必在这个阶段过度优化。
4. 页面实现详解:从列表到表单再到统计视图
4.1 列表页:FutureBuilder、StateSetter 和刷新的处理
观影记录账本的主页面就是记录列表。用 Flutter 实现一个列表页不难,但“增删改查之后如何刷新列表”这一环非常容易写乱。我用的是 FutureBuilder 加全局刷新标记的思路。
第一次进入页面时,从存储层异步拉取所有记录,展示为卡片列表。每次完成新增、编辑、删除后,通过改变一个 _refreshTrigger 变量的值,触发 setState,让 FutureBuilder 重新执行查询。这个模式比手动管理列表数据要省心得多,因为数据源始终是存储层的查询结果,不会出现“界面显示的数据和数据库真实数据不一致”的怪问题。
列表项建议用 Card 包一层 ListTile,副标题显示“类型 + 观影日期”,右侧展示评分。卡片的高是动态的,评论写得多时能自然撑开。这里需要特别考虑的是鸿蒙真机上 ListTile 的间距表现,我实测下来默认的 contentPadding 在华为系屏幕上会显得略微拥挤,建议横向 padding 设成 16,图标和文字的间距保持默认即可。所有间距类参数一定要在真机上过一遍,模拟器和真机的渲染密度差异往往就在这里体现。
dart复制FutureBuilder<List<MovieRecord>>(
future: _repository.getAllRecords(),
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const Center(child: CircularProgressIndicator());
}
final records = snapshot.data ?? [];
if (records.isEmpty) {
return const EmptyPlaceholder();
}
return ListView.builder(
itemCount: records.length,
itemBuilder: (context, index) {
return RecordCard(record: records[index]);
},
);
},
)
4.2 表单页:日期选择、评分滑杆和状态切换
表单页是用户每天打交道最多的地方,设计上要尽量减步操作。新建记录时,影片名称和类型用普通文本输入框,观影日期默认设置为今天,用户如果想改,点击后弹出 showDatePicker。评分用一个 Slider,最小值 0、最大值 10、divisions 设成 20,这样就能以 0.5 分为步长滑动评分,正好匹配大多数观影平台的计分习惯。状态切换用三个 ChoiceChip,分别对应“想看”“已看”“二刷”,选中的高亮颜色与应用主题色保持一致。
这里有一个值得说的细节:Slider 的 divisions 一旦设置,就只能在等分刻度上取值。0 到 10 分成 20 等份,每份正好 0.5 分,既直观又不卡手。很多应用的评分是 1 到 5 的星级,对于“观影账本”这种偏数据记录的应用,10 分制反而更能体现个人口味的细微差异。
保存按钮的校验逻辑也不要忽略。影片名称为空或只包含空格时,应当直接弹出提示并阻止提交。我对编辑和新增复用同一个表单组件,传入一个可空的 MovieRecord 对象,为空时按新增处理,否则填充原有值。这样避免了维护两套几乎相同的表单页面。
4.3 统计页:一个月的观影复盘怎么算
统计页是该应用的另一大亮点。它不需要引入重量级图表库,先把核心数据算出来,再用简单的横向进度条展示即可。月度统计的逻辑是:取出某个月份的全部记录,按状态过滤出“已看”的条目,然后算出总数、平均评分、打分最高的影片、各类型分布。
类型分布可以做成一个横向条形列表,每行显示类型名称、数量、占当月总量的百分比。第 10 条数据记录和一条横向比例条。这种显示方式在 Flutter 里非常好实现,不需要画坐标轴,只需要 LayoutBuilder 按比例算宽度。
dart复制final monthRecords = allRecords.where((r) {
return r.watchDate.startsWith(selectedMonth);
});
代码就一行筛选,但统计页的体验完全取决于这里。我在实际使用中还会在顶部放一个月份切换器,左右箭头切换上一个月和下一个月,中间显示“2025 年 6 月”这样的文字。翻看历史记录时非常有仪式感,而且实现成本并不高。
5. 鸿蒙适配实战:权限、路径与三端行为差异
5.1 权限声明:从 Android 到鸿蒙的迁移
Flutter 应用在 Android 上需要权限时,开发者要在 AndroidManifest.xml 里声明。到了鸿蒙,需要在 ohos 模块的 module.json5 里做类似的事情。以观影记录账本为例,如果只做本地存储,其实不需要申请任何敏感权限。但如果你在应用里提供了“从相册选择封面图”的功能,那就必须声明相册读取权限。
这个差异点值得展开说:鸿蒙的权限模型和 Android 同中有异,普通权限和敏感权限的声明位置、申请时机都不一样。对于初学者,我的建议是尽量在 MVP 版本里砍掉所有非必要权限——观影记录不一定非要本地封面图,保留一个“通过影片名称和年份标识”的能力就够用了。少申请一个权限,就等于少处理一类兼容问题,也少了一份隐私合规风险。
5.2 文件路径差异:path_provider 还能用吗
Flutter 在鸿蒙上获取应用文件目录,走的是 path_provider 插件。社区适配版已经让这个常用插件在鸿蒙上能正常返回目录路径。我在 Hive 初始化时这样写:
dart复制final appDir = await getApplicationDocumentsDirectory();
Hive.init(appDir.path);
需要注意的是,鸿蒙上返回的目录结构与 Android 并不完全一样,你不需要硬编码任何手写的路径前缀,通过插件取到的路径才是该平台真正合法的应用私有目录。千万别为了省事自己拼路径,比如把 Android/data 那套思路搬到鸿蒙目录上,必然撞得一头包。
数据备份和导出这块,我再多说一句。Hive 的 Box 本质上就是一个文件,导出备份的思路非常简单:把 Box 的存储文件复制到用户可访问的 Download 目录即可。但在鸿蒙上,写入公共下载目录通常需要额外的权限申请。更省心的做法是让用户通过应用自身提供的分享能力把文件分享出去,不涉及目录权限,体验也更好。
5.3 Material 组件在鸿蒙上的细节表现
这是我最想分享的一趴。Flutter 的 UI 是自己绘制的,不依赖系统组件,所以理论上同一套代码在任何平台都长一个样。但实际测试下来,鸿蒙上的字体渲染、滚动惯性、返回手势和 Android 还是有一些细微差别。
比如 AppBar 的高度和标题字号在鸿蒙上会显得略小,需要在主题里显式配置:
dart复制appBarTheme: const AppBarTheme(
centerTitle: true,
titleTextStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
),
再比如 Android 的返回手势是从屏幕左边缘滑动,鸿蒙的系统导航方式默认可能不同,如果你的应用里设置了自定义的 PopScope 逻辑,一定要在鸿蒙真机上验证手势交互是否符合预期。此外,像 CheckboxListTile 一类的组件,文字与勾选框的距离在不同屏幕上观感差异较大,建议统一调整 controlAffinity 和 contentPadding,不要依赖默认值。
这些细节点单独拎出来都不致命,但叠在一起就会让应用看起来“不属于这个平台”。做跨平台开发不能只盯着编译通过,平台体感才是用户留下还是卸载的关键。
6. 调试、签名与上架前最后一遍检查
6.1 hdc 命令行和 DevEco 模拟器的调试流程
鸿蒙开发的调试工具链里,hdc 是绕不开的命令行工具。它的角色相当于 Android 开发里的 adb。连接真机或启动模拟器后,可以用 hdc list targets 查看当前设备状态。安装应用时,使用 hdc install 命令把 HAP 包装到设备上,或者直接在 DevEco Studio 里一键 Run。
日常调试时有个小技巧:把 hdc 的常用命令封装成脚本,比如构建完 Flutter 产物后自动重新安装到设备。因为 Flutter 鸿蒙项目的构建是“先构建 Flutter 动态库,再包进鸿蒙工程”,每次修改 Dart 代码后,需要在 DevEco 里进行一次 Flutter 插件的重建,那个等待时间比纯 Flutter 项目要长。脚本化以后,至少可以把“手动点几个按钮”的时间省下来。
6.2 真机调试的几步关键设置
模拟器能解决大部分开发调试,但涉及状态栏高度、底部手势区域、字体渲染密度这些平台细节时,还是得靠真机。在鸿蒙真机上调试,首先要在系统设置里打开开发者模式。这通常需要在“关于本机”里连续点击“版本号”若干次,然后在“开发者选项”里打开 USB 调试。连接电脑后,弹窗里确认允许调试。与 Android 基本一致的逻辑。
真机调试时,hdc 的日志输出能力非常关键。Flutter 侧的 print 和 debugPrint 默认输出到 Flutter 工具的控制台,但如果你在鸿蒙侧的原生代码里打了日志,就需要在 DevEco 的 Log 窗口里查。这两套日志体系是分开的,排查问题前先确认自己正在看哪一份日志,能省下大量无效排查时间。
6.3 签名打包与异常排查清单
上架前的最后一步是签名打包。鸿蒙的签名机制要求应用有一个合法的签名证书,这些都可以在 DevEco Studio 的构建配置里完成。调试签名和使用签名要区分开,正式发布需要在管理后台申请发布证书,然后把证书配置到工程里,重新构建 HAP。
我在最终打包时整理过一个排查清单,每次都按顺序过一遍:
- 应用图标在各个尺寸下是否清晰,是否包含透明区域异常
- 应用启动页是否按鸿蒙建议的设置配置,是否出现闪白
- 所有文本在系统字体缩放之后是否溢出,尤其是列表卡片里的多行评论
- Hive 的 Box 名在版本升级时是否保持稳定,避免旧数据无法读取
- 删除记录时的确认弹窗文案是否明确,防止误触
- 真机飞行模式下的启动和操作是否正常,确保应用不依赖网络
如果你和我一样是个人开发者,建议在上架前把应用给身边朋友试用两天,重点观察崩溃日志和操作逻辑反馈。观影记录账本这种工具的本质不是技术炫技,而是让人随手打开就能记录当下这一刻的观影心情。数据不丢、操作顺手、界面干净,这三点做到了,用户自然会愿意长期用下去。而作为开发者,看到自己写的工具真的被别人每天使用,这是比任何技术指标都有成就感的事情。
