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

ujainu

41人浏览 · 2026-10-18 10:21:47

ujainu · 2026-10-18 10:21:47 发布

flutter_image_clipboard 只做一件事：把一张图片放进系统剪贴板，让用户能直接粘贴到聊天窗口。

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

适配仓库： flutter_image_clipboard

适配分支： feat/ohos_flutter_image_clipboard_1.0.0

适配 TAG： 1.0.0-ohos.1

一、先看最终效果

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

图 2：点击“复制示例图片到剪贴板”后的真实返回：copyImageToClipboard → 完成。

验证点	实测结果
Flutter OH 3.47 工程构建	通过，产出 `entry-default-signed.hap`
安装、启动（真机）	通过
复制示例图片到剪贴板	`copyImageToClipboard → 完成`

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

一条 MethodChannel，一个方法：

MethodChannel('clipboard_image')
  -> copyImageToClipboard({path})

三、实际环境

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_image_clipboard 1.0.0`

flutter --version
hdc list targets

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

上游包地址是 https://github.com/example/flutter_image_clipboard，版本 1.0.0 使用 MIT License。适配前我先查了 flutter-ohos-adaptation-checklist：它把本库列在「已适配」清单里，对应 CPF-Flutter 在 GitCode 上的 fluttertpc_image_clipboard（AtomGit 侧同名的 CPF-Flutter/fluttertpc_image_clipboard 可读，2026-01-13 创建）。本文这份是 oh-flutter 组织下的独立实现，不是首发。

仓库适配提交为 0668e53，分支与 TAG 1.0.0-ohos.1 均指向该提交。

git clone https://atomgit.com/oh-flutter/flutter_image_clipboard.git
cd flutter_image_clipboard
git switch feat/ohos_flutter_image_clipboard_1.0.0
git log --oneline -5

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

git switch -c feat/ohos_flutter_image_clipboard_1.0.0

关键目录如下：

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

flutter:
  plugin:
    platforms:
      ohos:
        pluginClass: FlutterImageClipboardPlugin

pluginClass 必须和 ohos/index.ets 导出的类名一致。这一步在所有库里都踩过：名字对不上时 Dart 能编译，运行时却抛 MissingPluginException，没有任何构建期提示。

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

通道名必须与上游 Dart 源码逐字一致。本库的映射如下：

方法	OpenHarmony 实现	说明
`copyImageToClipboard(File)`	沙箱文件 → `image.createImageSource` → PixelMap → `createData(MIMETYPE_PIXELMAP)`	真实写入剪贴板

核心代码：

private async copyImage(path: string): Promise<void> {
  const file = fs.openSync(path, fs.OpenMode.READ_ONLY);
  try {
    const stat = fs.statSync(path);
    const buffer = new ArrayBuffer(stat.size);
    fs.readSync(file.fd, buffer);
    const source = image.createImageSource(buffer);
    const pixelMap = await source.createPixelMap();
    const data = pasteboard.createData(pasteboard.MIMETYPE_PIXELMAP, pixelMap);
    pasteboard.getSystemPasteboard().setDataSync(data);
  } finally {
    fs.closeSync(file);
  }
}

七、构建配置与签名

示例工程的目标 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。签名 profile 里绑定的 bundleName 必须与它一致，否则 SignHap 直接报 00303074 Configuration Error。证书、p12、p7b 和密码不提交到仓库。

八、通过 AtomGit 引入适配版

在业务工程中使用时锁定 TAG：

dependencies:
  flutter_image_clipboard:
    git:
      url: https://atomgit.com/oh-flutter/flutter_image_clipboard.git
      ref: 1.0.0-ohos.1

flutter pub get

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

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

cd example
flutter pub get
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 报告安装成功。所有示例共用同一个 bundleName，重装后要先 aa force-stop 再 aa start，否则系统只是把旧任务拉到前台，看到的是上一次安装的界面。

十、适配结果和当前边界

鸿蒙剪贴板的图片项类型是 MIMETYPE_PIXELMAP，不能直接塞图片字节；必须先解码成 PixelMap。这与 Android 的 content URI 方案差别较大。

十一、FAQ

Q1：为什么不能直接写入 PNG 字节？

原因： pasteboard.createData 对 MIMETYPE_PIXELMAP 要求 PixelMap 值，传 Uint8Array 会类型不符。
验证结果： 示例在沙箱生成 64×64 红色 PNG，解码成 PixelMap 后写入，真机返回 copyImageToClipboard → 完成。

Q2：示例图片从哪来？

原因： 用纯 Dart 手工构造 PNG（zlib stored 块），不依赖任何资源文件，避免把测试图片提交进仓库。
验证结果： 写入链路真机验证通过。

十二、总结

flutter_image_clipboard 1.0.0 在鸿蒙上已经接入真实系统能力，Dart 侧 API 与上游保持一致。本文的验证结果全部来自 HarmonyOS API 26 真机按钮点击，没有占位返回值；平台本身不具备的能力在正文和 README 中都已明确标注为边界。

附：与已有实现的关系

社区里已有一份实现：CPF-Flutter/fluttertpc_image_clipboard（AtomGit 侧同名仓库 2026-01-13 创建）。本文这份是 oh-flutter 组织下的独立实现，差异在于：

组织与分支：本文为 oh-flutter/flutter_image_clipboard 的 feat/ohos_flutter_image_clipboard_1.0.0，TAG 1.0.0-ohos.1；
鸿蒙侧走 image.createImageSource → PixelMap → MIMETYPE_PIXELMAP 的路径，示例用纯 Dart 生成 PNG，不依赖额外资源。

选用哪一份应以实际代码审查与你们的 Flutter OH 版本为准；两份实现的服务端 API 面一致，迁移时替换 pubspec.yaml 的 git 地址与 ref 即可。