Flutter 三方库鸿蒙化实战:shared_preferences 从接入到适配全流程
本文以 shared_preferences 为例,将 DevEco Studio、FVM 等工具全程融入 Flutter 三方库鸿蒙化实操,从环境搭建、项目创建、代码编写、运行验证到问题排查,实现工具与实操的深度绑定,避免工具单独输出。实际开发中,优先选择 OpenHarmony TPC 适配库,可大幅提升开发效率,减少工具配置和调试成本;若需使用 pub.dev 原生库,需借助 DevEco
Flutter 三方库鸿蒙化实战:shared_preferences 从接入到适配全流程
本文以 shared_preferences(Flutter 官方轻量级存储库)为例,完整覆盖 OpenHarmony/HarmonyOS 下三方库的接入、适配、排查与工具结合实践,全程将 DevEco Studio、FVM 等工具融入实操步骤,同时对比 pub.dev 原生库 与OpenHarmony TPC 适配库 的差异,提供可直接落地的操作指南,避免工具与实操割裂。
一、核心背景与环境搭建(工具实操嵌入)
1. 选库理由
- shared_preferences 是 Flutter 官方推荐的键值对存储库,覆盖 90%+ 轻量存储场景(用户配置、缓存、登录态等)。
- 已在 OpenHarmony TPC 社区仓库 完成适配(`shared_preferences_ohos`),同时 pub.dev 原生版 可通过改造支持鸿蒙,适配逻辑通用,可迁移至其他三方库。
2. 工具准备与搭建(全程实操,不单独输出)
本次实战需用到 DevEco Studio、FVM、Flutter-OH SDK 等工具,所有工具操作均嵌入环境搭建步骤,确保每一步可落地:
第一步:安装并配置 DevEco Studio(鸿蒙开发核心工具)
1. 下载 DevEco Studio 6.0.2+ 版本(官网地址:https://developer.harmonyos.com/cn/develop/deveco-studio/),安装时勾选「HarmonyOS SDK」,并选择安装 API 10+ 版本(鸿蒙原生能力依赖此 API 版本)。
2. 安装完成后,打开 DevEco Studio,进入「Settings」→「Appearance & Behavior」→「System Settings」→「HarmonyOS SDK」,确认 SDK 路径已配置,且 API 10 相关组件全部安装(若未安装,点击「Apply」完成安装)。
第二步:安装并配置 FVM(多版本 Flutter 管理工具,避免环境冲突)
1. 打开终端(Windows 用命令提示符,macOS/Linux 用终端),执行命令安装 FVM:
# macOS/Linux 命令 dart pub global activate fvm # Windows 命令(需提前安装 Chocolatey) choco install fvm
2. 安装完成后,验证 FVM 是否可用,执行命令 fvm --version,若输出 3.0.0+ 版本号,说明安装成功。
3. 安装并配置 Flutter-OH 版本(鸿蒙特供 Flutter 分支),执行以下终端命令,全程用 FVM 管理版本,避免与原生 Flutter 冲突:
# 安装 Flutter-OH 3.27.0 版本(适配 API 10,稳定性最佳) fvm install 3.27.0 # 进入 FVM 安装目录,克隆鸿蒙适配的 Flutter 分支 cd ~/fvm/versions/3.27.0 git clone -b oh-3.27.4-dev https://gitcode.com/openharmony/flutter.git
4. 配置环境变量,将 Flutter-OH 和鸿蒙 HDC 工具路径加入系统环境(确保后续命令可直接执行):
# macOS/Linux 配置(编辑 ~/.bash_profile 或 ~/.zshrc) export FLUTTER_HOME=~/fvm/versions/3.27.0/flutter export PATH=$PATH:$FLUTTER_HOME/bin:$HDC_HOME # Windows 配置(右键「此电脑」→「属性」→「高级系统设置」→「环境变量」) # 新增 FLUTTER_HOME 变量,值为 C:\fvm\versions\3.27.0\flutter # 在 Path 变量中添加 %FLUTTER_HOME%\bin 和 %HDC_HOME%(HDC 为鸿蒙 SDK toolchains 路径)
第三步:验证环境(结合 DevEco Studio 和终端工具)
1. 打开 DevEco Studio,启动鸿蒙模拟器(点击顶部「模拟器」按钮,选择 API 10 版本的模拟器,等待启动完成)。
2. 终端执行命令 flutter devices,若输出鸿蒙模拟器信息(标注 ohos),说明 Flutter-OH 与鸿蒙模拟器适配成功;同时在 DevEco Studio 中查看模拟器状态,确保模拟器正常运行。
二、实战一:接入 OpenHarmony TPC 适配版 `shared_preferences_ohos`(工具全程融入)
本实战全程结合 FVM、DevEco Studio 操作,实现从项目创建到运行验证的全流程,工具操作与实操步骤深度绑定,不单独输出工具使用说明。
1. 用 FVM 新建 Flutter-OH 项目
1. 终端执行命令,用 FVM 切换到已安装的 Flutter-OH 版本,避免版本冲突:
fvm use 3.27.0
2. 执行命令新建 Flutter-OH 项目,指定平台为 ohos,确保项目默认适配鸿蒙:
flutter create --platforms=ohos my_ohos_storage cd my_ohos_storage
3. 用 DevEco Studio 打开项目:打开 DevEco Studio,点击「Open Project」,选择新建的 my_ohos_storage 项目中的「android」目录(鸿蒙模块默认关联此目录),等待项目同步完成(底部同步进度条消失即可)。
2. 添加 TPC 适配库依赖(结合 DevEco Studio 编辑配置)
1. 在 DevEco Studio 中,找到项目根目录下的 `pubspec.yaml` 文件,双击打开编辑(DevEco Studio 支持 yaml 语法高亮,可快速排查语法错误)。
2. 在 `dependencies` 节点下添加 TPC 适配库依赖,两种方式可选择(推荐第一种,稳定且适配鸿蒙),编辑完成后保存文件:
name: my_ohos_storage description: A Flutter OHOS storage demo. version: 1.0.0+1 environment: sdk: '>=3.2.0 <4.0.0' flutter: '>=3.27.0' dependencies: flutter: sdk: flutter # 方式1:直接引用 TPC 适配库(推荐,稳定,已适配鸿蒙) shared_preferences_ohos: ^0.1.2 # 方式2:引用 Git 仓库(最新版,适合需要最新功能的场景) # shared_preferences: # git: # url: "https://gitcode.com/openharmony-sig/flutter_packages.git" # path: "packages/shared_preferences/shared_preferences" cupertino_icons: ^1.0.6 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^3.0.0 flutter: uses-material-design: true
3. 终端执行命令,安装依赖(也可点击 DevEco Studio 顶部「Pub get」按钮,快速安装依赖):
flutter pub get
4. 依赖安装完成后,在 DevEco Studio 中查看「External Libraries」,确认 `shared_preferences_ohos` 已成功引入,无报错提示。
3. 核心代码实现(用 DevEco Studio 编写与调试)
1. 在 DevEco Studio 中,找到 `lib/main.dart` 文件,双击打开,编写存储/读取/删除/清除功能代码(DevEco Studio 支持 Dart 语法提示、错误校验,可快速定位代码问题):
import 'package:flutter/material.dart'; import 'package:shared_preferences_ohos/shared_preferences_ohos.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final TextEditingController _keyController = TextEditingController(); final TextEditingController _valueController = TextEditingController(); String _result = "未操作"; // 存储字符串 Future<void> _setString() async { final prefs = SharedPreferencesOhos.getInstance(); final key = _keyController.text.trim(); final value = _valueController.text.trim(); if (key.isEmpty || value.isEmpty) { setState(() => _result = "键/值不能为空"); return; } final success = await prefs.setString(key, value); setState(() => _result = success ? "存储成功" : "存储失败"); } // 读取字符串 Future<void> _getString() async { final prefs = SharedPreferencesOhos.getInstance(); final key = _keyController.text.trim(); final value = await prefs.getString(key); setState(() => _result = "读取结果:${value ?? "null"}"); } // 删除键值对 Future<void> _remove() async { final prefs = SharedPreferencesOhos.getInstance(); final key = _keyController.text.trim(); final success = await prefs.remove(key); setState(() => _result = success ? "删除成功" : "删除失败"); } // 清除所有数据 Future<void> _clear() async { final prefs = SharedPreferencesOhos.getInstance(); final success = await prefs.clear(); setState(() => _result = success ? "清除成功" : "清除失败"); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("OHOS 存储 Demo")), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextField(controller: _keyController, decoration: const InputDecoration(labelText: "键")), TextField(controller: _valueController, decoration: const InputDecoration(labelText: "值")), const SizedBox(height: 20), Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton(onPressed: _setString, child: const Text("存储")), ElevatedButton(onPressed: _getString, child: const Text("读取")), ]), const SizedBox(height: 10), Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton(onPressed: _remove, child: const Text("删除")), ElevatedButton(onPressed: _clear, child: const Text("清除")), ]), const SizedBox(height: 20), Text(_result, style: const TextStyle(fontSize: 16, color: Colors.blue)), ], ), ), ), ); } }
2. 代码编写完成后,点击 DevEco Studio 顶部「Format Code」按钮,格式化代码,确保代码规范;同时检查代码中是否有报错(红色波浪线),若有报错,根据提示修正(如依赖未引入、语法错误等)。
4. 运行与验证(结合 DevEco Studio 模拟器与终端)
1. 确保 DevEco Studio 中的鸿蒙模拟器已启动(若未启动,点击顶部「模拟器」按钮启动,等待模拟器完全加载)。
2. 终端执行运行命令,指定运行平台为 ohos,也可直接点击 DevEco Studio 顶部「Run」按钮(绿色三角形),选择鸿蒙模拟器运行:
flutter run -d ohos # 若有多个模拟器,可指定模拟器 ID:flutter run -d ohos-xxxx
3. 运行成功后,模拟器会显示 OHOS 存储 Demo 界面,操作步骤:输入键值 → 点击「存储」→ 点击「读取」,验证数据持久化;同时在 DevEco Studio 底部「Log」面板,可查看运行日志,若有异常,可通过日志定位问题。
三、实战二:适配 pub.dev 原生 `shared_preferences` 到鸿蒙(工具实操融入)
若需使用 pub.dev 最新版 `shared_preferences`,需通过 MethodChannel 封装鸿蒙原生能力,全程结合 DevEco Studio 编写原生代码、调试,FVM 管理环境,确保适配流程可落地。
1. 依赖配置(用 DevEco Studio 编辑 pubspec.yaml)
1. 在 DevEco Studio 中打开 `pubspec.yaml` 文件,修改依赖配置,引用 pub.dev 原生库并添加系统服务依赖,编辑完成后保存,点击「Pub get」安装依赖:
dependencies: flutter: sdk: flutter shared_preferences: ^2.2.2 # pub.dev 原生库 flutter/services.dart # 系统服务,用于 MethodChannel 通信
2. Dart 层封装(MethodChannel)(用 DevEco Studio 编写代码)
1. 在 DevEco Studio 中,右键点击 `lib` 目录,选择「New」→「Dart File」,创建 `ohos_storage_channel.dart` 文件,编写 MethodChannel 封装代码,实现与鸿蒙原生层的通信:
import 'package:flutter/services.dart'; class OHOSStorageChannel { // 定义 Channel 名称(需与鸿蒙原生层一致,避免通信失败) static const _channel = MethodChannel('com.ohos.storage.preferences'); // 存储字符串 static Future<bool> setString(String key, String value) async { try { return await _channel.invokeMethod('setString', {'key': key, 'value': value}); } on PlatformException catch (e) { print("存储失败:${e.message}"); return false; } } // 读取字符串 static Future<String?> getString(String key) async { try { return await _channel.invokeMethod('getString', {'key': key}); } on PlatformException catch (e) { print("读取失败:${e.message}"); return null; } } // 删除键值对 static Future<bool> remove(String key) async { try { return await _channel.invokeMethod('remove', {'key': key}); } on PlatformException catch (e) { print("删除失败:${e.message}"); return false; } } // 清除所有 static Future<bool> clear() async { try { return await _channel.invokeMethod('clear'); } on PlatformException catch (e) { print("清除失败:${e.message}"); return false; } } }
3. 鸿蒙原生层实现(ETS)(用 DevEco Studio 编写原生代码)
1. 在 DevEco Studio 中,找到鸿蒙模块 `entry/src/main/ets` 目录,右键点击该目录,选择「New」→「TypeScript File」,创建 `PreferencesHelper.ts` 文件,编写鸿蒙原生 Preferences 操作代码:
import { preferences } from '@ohos.data.preferences'; import { hilog } from '@ohos.hilog'; // 日志标签(用于 DevEco Studio 日志过滤,方便排查问题) const TAG = 'OHOS_Storage'; // 偏好存储名称(全局唯一,避免与其他应用冲突) const PREFERENCES_NAME = 'flutter_ohos_storage'; // 初始化偏好存储(确保每次操作前初始化,避免空指针异常) async function getPreferences() { return await preferences.getPreferences(globalThis.context, PREFERENCES_NAME); } // 注册 MethodChannel 方法(与 Dart 层 Channel 名称一致,实现通信) export function registerStorageChannel(registrar: any) { const channel = registrar.methodChannel('com.ohos.storage.preferences'); // 处理 Dart 层调用的方法 channel.setMethodCallHandler(async (call: any, result: any) => { const prefs = await getPreferences(); switch (call.method) { case 'setString': const key = call.arguments['key']; const value = call.arguments['value']; await prefs.put(key, value); await prefs.flush(); result.success(true); break; case 'getString': const getKey = call.arguments['key']; const resultValue = await prefs.get(getKey, ''); result.success(resultValue); break; case 'remove': const removeKey = call.arguments['key']; await prefs.delete(removeKey); await prefs.flush(); result.success(true); break; case 'clear': await prefs.clear(); await prefs.flush(); result.success(true); break; default: result.error('Unsupported method', call.method, null); break; } }); }
2. 注册原生插件(在 DevEco Studio 中修改入口文件):找到 `entry/src/main/ets/MainAbility/MainAbility.ts` 文件,双击打开,导入并注册存储 Channel,确保 Dart 层能正常调用原生方法:
import { registerStorageChannel } from '../PreferencesHelper'; import { hilog } from '@ohos.hilog'; const TAG = 'MainAbility'; export default class MainAbility extends Ability { onCreate(want, launchParam) { // 注册存储 Channel(关键步骤,未注册会导致 MethodChannel 调用失败) registerStorageChannel(this.registrar); hilog.info(0x0000, TAG, 'MainAbility onCreate'); } }
4. 替换 Dart 层调用(用 DevEco Studio 修改代码)
1. 打开 `lib/main.dart` 文件,替换原有导入和方法实现,使用自定义 Channel 替代原生库,修改完成后格式化代码,检查无报错:
// 替换原有导入(注释掉 TPC 适配库,引入自定义 Channel) // import 'package:shared_preferences_ohos/shared_preferences_ohos.dart'; import 'ohos_storage_channel.dart'; // 替换存储方法实现(其他方法类似,统一替换为自定义 Channel 调用) Future<void> _setString() async { final key = _keyController.text.trim(); final value = _valueController.text.trim(); if (key.isEmpty || value.isEmpty) { setState(() => _result = "键/值不能为空"); return; } final success = await OHOSStorageChannel.setString(key, value); setState(() => _result = success ? "存储成功" : "存储失败"); }
5. 运行验证(结合 DevEco Studio 与终端)
1. 确保鸿蒙模拟器已启动,在 DevEco Studio 中点击「Run」按钮,或终端执行 `flutter run -d ohos`,运行项目。
2. 若运行失败,打开 DevEco Studio 底部「Log」面板,过滤「OHOS_Storage」标签,查看报错信息(如 Channel 未注册、原生代码报错等),根据日志提示修正问题;运行成功后,验证与实战一一致的功能,确保数据存储正常。
四、常见问题与排查(结合工具实操解决)
以下问题均结合 DevEco Studio、终端、FVM 等工具排查解决,避免单纯描述问题,重点体现工具在排查中的作用:
|
问题现象 |
原因分析 |
工具排查与解决方案 |
|---|---|---|
|
运行时出现 MissingPluginException |
原生插件未注册/依赖未正确安装 |
1. 用终端执行 `flutter clean && flutter pub get`,清除缓存并重新安装依赖;2. 在 DevEco Studio 中检查 `MainAbility.ts` 文件,确认 Channel 已注册;3. 检查 `pubspec.yaml` 文件,确保依赖路径正确(OHOS 插件需本地路径时,用 DevEco Studio 编辑路径)。 |
|
数据读取为 null |
1. 写入未 await;2. 键名不一致;3. 未初始化 Preferences |
1. 在 DevEco Studio 中检查 Dart 代码,确保存储操作加 `await`;2. 统一键名常量,避免拼写错误;3. 在 DevEco Studio 中查看 `PreferencesHelper.ts`,确认 `getPreferences()` 方法在调用前已执行,可添加日志打印(用 hilog 输出),在 Log 面板查看初始化状态。 |
|
构建失败(hvigor 路径错误) |
依赖使用 git 地址,OHOS 要求本地路径 |
1. 在 DevEco Studio 中编辑 `pubspec.yaml`,将 git 依赖改为本地 path;2. 示例配置:shared_preferences: path: packagesshared_preferences/shared_preferences;3. 编辑完成后,点击「Pub get」重新安装依赖,在 DevEco Studio 中查看依赖是否正常引入。 |
|
权限不足,存储失败 |
鸿蒙设备/模拟器需授予存储权限 |
1. 在 DevEco Studio 中找到 `module.json5` 文件,双击打开,在「abilities」节点下添加权限:"permissions": ["ohos.permission.WRITE_USER_KITS"];2. 保存文件后,重新运行项目,模拟器会弹出权限申请提示,点击允许即可。 |
|
版本冲突,构建失败 |
Flutter-OH 与库版本不兼容 |
1. 用 FVM 切换到推荐版本(`fvm use 3.27.0`),锁定 Flutter 版本;2. 在 DevEco Studio 中编辑 `pubspec.yaml`,使用 TPC 适配库并固定版本(如 shared_preferences_ohos ^0.1.2);3. 终端执行 `flutter pub get`,重新安装依赖,排查版本冲突。 |
五、工具结合进阶实践(深度融入实操)
1. FVM 多版本管理(实战场景应用)
在实际开发中,不同项目可能依赖不同版本的 Flutter-OH,用 FVM 可快速切换版本,避免环境冲突,具体操作融入项目开发流程:
1. 新增项目时,用 FVM 安装对应版本的 Flutter-OH:`fvm install 3.28.0`(适配 API 11)。
2. 切换项目版本:进入项目目录,执行 `fvm use 3.28.0`,即可将当前项目切换到指定版本,终端执行 `fvm list` 可查看已安装版本,确认当前使用版本。
3. 全局版本设置:若多个项目使用同一版本,执行 `fvm global 3.27.0`,设置全局默认版本,减少切换操作。
2. DevEco Studio 调试技巧(提升排查效率)
1. 原生代码调试:在 DevEco Studio 中,在 `PreferencesHelper.ts` 中需要调试的行点击左侧,设置断点,然后点击顶部「Debug」按钮(虫子图标),运行项目,程序会在断点处暂停,可逐步调试,查看变量值、调用流程。
2. 日志过滤:在 DevEco Studio 底部「Log」面板,输入过滤条件(如 TAG 为 OHOS_Storage),可快速筛选出目标日志,排除无关日志干扰,快速定位问题。
3. 代码跳转:在 DevEco Studio 中,按住 Ctrl 键(macOS 按 Command 键),点击代码中的类、方法,可快速跳转到定义处,方便查看源码、修改代码。
3. 鸿蒙 SDK 与库版本兼容(工具辅助校验)
1. 在 DevEco Studio 中,进入「Settings」→「HarmonyOS SDK」,可查看当前安装的 SDK 版本,根据项目需求切换 API 版本(如 API 10/11)。
2. 结合 FVM 管理 Flutter-OH 版本,确保 Flutter-OH 版本与鸿蒙 SDK 版本兼容,具体兼容关系如下:
|
鸿蒙 API 版本 |
推荐 Flutter-OH 版本 |
适配库版本 |
|---|---|---|
|
API 10 |
3.27.0+(用 FVM 安装) |
shared_preferences_ohos ^0.1.2 |
|
API 11 |
3.28.0+(用 FVM 安装) |
OpenHarmony TPC 仓库最新适配库 |
六、选型对比:TPC 适配库 vs pub 原生库(结合工具使用体验)
|
对比维度 |
OpenHarmony TPC 适配库 |
pub.dev 原生库 |
|---|---|---|
|
API 一致性 |
100% 与原生一致,无需改造,用 DevEco Studio 编辑代码时可直接复用原有逻辑 |
需通过 MethodChannel 封装,需在 DevEco Studio 中编写原生代码,API 需重新适配 |
|
开发效率 |
开箱即用,10 分钟接入,结合 DevEco Studio 的 Pub get 功能,快速完成依赖安装 |
需编写原生代码(ETS/Java),在 DevEco Studio 中调试原生与 Dart 层通信,开发周期长 |
|
稳定性 |
社区维护,适配鸿蒙最佳实践,在 DevEco Studio 中运行时报错少,日志清晰 |
无官方鸿蒙支持,存在兼容性风险,需在 DevEco Studio 中反复调试排查冲突 |
|
维护成本 |
低(社区持续更新),用 FVM 锁定版本后,无需频繁适配,DevEco Studio 可快速同步依赖 |
高(需自行维护原生层),鸿蒙 SDK 升级后,需在 DevEco Studio 中修改原生代码,重新调试 |
|
工具适配性 |
完美适配 DevEco Studio、FVM,依赖安装、代码调试、运行验证均流畅,无额外配置 |
需手动配置 MethodChannel、注册原生插件,在 DevEco Studio 中需额外配置原生模块,工具操作繁琐 |
七、总结
本文以 shared_preferences 为例,将 DevEco Studio、FVM 等工具全程融入 Flutter 三方库鸿蒙化实操,从环境搭建、项目创建、代码编写、运行验证到问题排查,实现工具与实操的深度绑定,避免工具单独输出。实际开发中,优先选择 OpenHarmony TPC 适配库,可大幅提升开发效率,减少工具配置和调试成本;若需使用 pub.dev 原生库,需借助 DevEco Studio 完成原生层封装和调试,结合 FVM 管理环境,确保适配流程顺畅。
更多推荐



所有评论(0)