Flutter 3.47 鸿蒙三方库适配实战：从 0 到 1 处理 flutter_scan_plus

子春一

20人浏览 · 2026-10-17 20:45:16

子春一 · 2026-10-17 20:45:16 发布

Flutter 3.47 鸿蒙三方库适配实战：从 0 到 1 处理 flutter_scan_plus

条码解析是把相机画面或图片转成字符串的能力，二维码登录、商品扫码都靠它。flutter_scan_plus 支持从图片路径解析条码，并管理扫描会话的生命周期。把它带到鸿蒙时，图像解码与识别是核心能力面。

本文以 flutter_scan_plus 1.6.0 为例，记录我如何保留原有 Dart API、补齐 Flutter OH 插件入口、在鸿蒙端接入真实系统能力，并在 HarmonyOS API 26 真机上完成构建、安装、启动和按钮调用验证。

适配仓库： oh-flutter/flutter_scan_plus

适配分支： feat/ohos_flutter_scan_plus_1.6.0

适配 TAG： 1.6.0-ohos.2

一、先看最终效果

在这里插入图片描述

图 1：HarmonyOS API 26 真机启动 Demo。页面显示 flutter_scan_plus 1.6.0。

在这里插入图片描述

图 2：点击“解析图片条码”后返回 parse - https://oh-flutter.example.com/verify——HMS Scan Kit 识别出的真实二维码内容。

验证点	实测结果	证据
Flutter OH 3.47 工程构建	通过	`entry-default-signed.hap`
安装、启动	通过	图 1
`parse(path)`	识别出二维码内容	图 2
识别引擎	HMS Scan Kit `detectBarcode`	图 2

二、这个库原来是怎么工作的

flutter_scan_plus 的通道结构支持多会话：

Dart Scan
  -> MethodChannel('scanx/sdk')              # 主通道：parse / getPlatformVersion
  -> MethodChannel('scanx/sdk/method_<id>')  # 每个扫描会话的独立通道
  -> Android ML Kit / iOS Vision

Scan.parse(path) 解析图片返回条码字符串；会话类 API 通过 resume/pause 控制扫描状态。

三、实际环境

Flutter 鸿蒙环境搭建不在本文重复展开，直接参考 Flutter OH 环境搭建指南。

组件	版本
Flutter OH	`3.47.4-ohos-1.0.4`
Dart	`3.13.3`
DevEco Studio	`26.0.0 Release`
HarmonyOS SDK	API 26
测试设备	华为畅享 90 Pro Max，HarmonyOS `7.0.0.105`（API 26）
目标库	`flutter_scan_plus 1.6.0`

flutter --version
hdc list targets

四、确认上游版本并同步到 AtomGit

仓库适配提交为 abc45f6，分支与 TAG 1.6.0-ohos.2 均指向该提交。

git clone https://atomgit.com/oh-flutter/flutter_scan_plus.git
cd flutter_scan_plus
git switch feat/ohos_flutter_scan_plus_1.6.0
git log --oneline -5

五、创建适配分支并检查工程结构

git switch -c feat/ohos_flutter_scan_plus_1.6.0

关键目录如下：

flutter_scan_plus/
├── lib/                                        # 原有 Dart API 和 MethodChannel
├── ohos/
│   ├── index.ets                               # OHOS 插件导出入口
│   └── src/main/ets/components/plugin/
│       └── ScanPlugin.ets                           # 通道实现
├── example/lib/main.dart                        # 真机验证 Demo
├── example/ohos/                                # Flutter OH 宿主工程
├── pubspec.yaml                                # 声明 ohos 平台
└── README.OpenHarmony_CN.md                    # 鸿蒙适配说明

pubspec.yaml 中的关键声明是：

flutter:
  plugin:
    platforms:
      ohos:
        pluginClass: ScanPlugin

pluginClass 必须和 ohos/index.ets 导出的类名一致，否则 Dart 端能编译，运行时却不会注册插件。

六、适配过程：注册通道并对齐语义

// 先保证参数读取正确：Dart 侧传的是裸字符串
const rawArgs = call.args as Object | null;
const path = rawArgs != null && typeof rawArgs === 'string' ? rawArgs as string : null;

// HMS Scan Kit 识别
const uri = path.startsWith('file://') ? path : `file://${path}`;
const results = await detectBarcode.decode({ uri: uri });
return results.length > 0 ? results[0].originalValue : null;

方法	OpenHarmony 实现
`parse(path)`	`@hms.core.scan.detectBarcode.decode({ uri })`
`resume` / `pause`	安全无操作（取景 UI 未接入）

七、构建配置与签名

示例工程的目标 SDK 对齐到 26，与 @ohos/flutter_ohos 的最低要求一致：

{
  "name": "default",
  "compatibleSdkVersion": "26.0.0",
  "targetSdkVersion": "26.0.0",
  "runtimeOS": "HarmonyOS"
}

Demo 的 AppScope/app.json5 统一成 com.example.flutter_oh_demo，与 DevEco 调试签名对应。证书、p12、p7b 和密码没有提交到仓库，读者应在自己的 DevEco Studio 中生成调试签名。

八、通过 AtomGit 引入适配版

在另一个 Flutter OH 应用中使用时，建议锁定 TAG：

dependencies:
  flutter_scan_plus:
    git:
      url: https://atomgit.com/oh-flutter/flutter_scan_plus.git
      ref: 1.6.0-ohos.2

flutter pub get

然后在 pubspec.lock 检查 source: git、AtomGit 地址和 resolved-ref，确认没有解析到 pub.dev 的同名版本。

九、构建、安装和真机验证

cd example
flutter pub get
flutter analyze
flutter build hap --debug
hdc install -r build/ohos/hap/entry-default-signed.hap
hdc shell aa start -a EntryAbility -b com.example.flutter_oh_demo

构建输出为 ✓ Built build/ohos/hap/entry-default-signed.hap.，随后 hdc 报告安装成功并启动 Ability。真机上按本文的截图顺序逐一点击按钮完成验证。

十、适配结果和当前边界

条码识别已完整接入。这里是两点实现细节：

Dart 侧 invokeMethod('parse', path) 传的是裸字符串，而 flutter_ohos 的 call.argument(key) 对非 Map 参数会抛 ClassCastException，必须直接读 call.args。
取景扫描（ScanView）依赖 PlatformView 与相机权限，本轮未接入；parse 的图片识别已完整可用并验证。

十一、FAQ

Q1：识别结果怎么返回？

现象： parse 返回识别出的原始字符串，未识别到时为空值，与上游语义一致。
解决方法： 调用方判空后展示或继续处理。
验证结果： 真机识别二维码得到 https://oh-flutter.example.com/verify。

Q2：取景扫描怎么处理？

现象： resume/pause 作用于取景扫描，取景 UI 依赖 PlatformView 与相机权限。
解决方法： 图片识别直接用 parse；取景 UI 作为后续增量接入。
验证结果： 图片识别链路真机验证通过。

Q3：多会话通道需要处理吗？

现象： 上游的 ScanView 会为每个视图创建独立通道；图片识别不需要。
解决方法： 按需接入。
验证结果： 当前实现覆盖 parse。

十二、总结

flutter_scan_plus 1.6.0 已接入鸿蒙的条码识别：用 HMS Scan Kit 的 detectBarcode.decode 识别图片中的二维码/条码，返回原始内容字符串。验证时用一张内容为 https://oh-flutter.example.com/verify 的二维码，识别结果完全一致。