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

子春一

20人浏览 · 2026-10-17 20:41:30

子春一 · 2026-10-17 20:41:30 发布

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

截图分享是社交与工具类应用的常见功能。flutter_native_screenshot 的思路和 Flutter 自带的 RepaintBoundary 不同：它走原生系统的截图能力，能抓到包含平台视图在内的画面。把它带到鸿蒙时，系统截图接口是适配目标。

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

适配仓库： oh-flutter/flutter_native_screenshot

适配分支： feat/ohos_flutter_native_screenshot_1.3.0

适配 TAG： 1.3.0-ohos.2

一、先看最终效果

在这里插入图片描述

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

在这里插入图片描述

图 2：点击“触发原生截图”后系统弹出屏幕截图授权弹窗（CUSTOM_SCREEN_CAPTURE，user_grant 级）。

在这里插入图片描述

图 3：允许授权后返回沙箱 PNG 路径 .../cache/flutter_native_screenshot_1792165054488.png，文件已落盘。

验证点	实测结果	证据
Flutter OH 3.47 工程构建	通过	`entry-default-signed.hap`
安装、启动（真机）	通过	图 1
首次截图	系统授权弹窗	图 2
允许后截图	返回沙箱 PNG 路径（156KB）	图 3
截图能力	`@ohos.screenshot.capture`	图 3

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

flutter_native_screenshot 的接口只有一个方法：

Dart FlutterNativeScreenshot
  -> MethodChannel('flutter_native_screenshot')
  -> Android Canvas 绘制 / iOS UIGraphics
  -> takeScreenshot() 返回保存路径

方法返回截图文件的路径，调用方据此读取图片。

三、实际环境

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_native_screenshot 1.3.0`

flutter --version
hdc list targets

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

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

git clone https://atomgit.com/oh-flutter/flutter_native_screenshot.git
cd flutter_native_screenshot
git switch feat/ohos_flutter_native_screenshot_1.3.0
git log --oneline -5

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

git switch -c feat/ohos_flutter_native_screenshot_1.3.0

关键目录如下：

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

pubspec.yaml 中的关键声明是：

flutter:
  plugin:
    platforms:
      ohos:
        pluginClass: FlutterNativeScreenshotPlugin

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

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

// 全屏截图：screenshot.capture（需 CUSTOM_SCREEN_CAPTURE）
await this.ensurePermission();   // user_grant 权限，需运行时申请
const pixelMap = await screenshot.capture();
const png = await image.createImagePacker()
  .packToData(pixelMap, { format: 'image/png', quality: 100 });
const path = `${this.ability!.context.cacheDir}/shot_${Date.now()}.png`;
const file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, png);

方法	OpenHarmony 实现
`takeScreenshot()`	`screenshot.capture()` + `ImagePacker` 编码 PNG
权限	`CUSTOM_SCREEN_CAPTURE`（user_grant，运行时申请）

七、构建配置与签名

示例工程的目标 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_native_screenshot:
    git:
      url: https://atomgit.com/oh-flutter/flutter_native_screenshot.git
      ref: 1.3.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。真机上按本文的截图顺序逐一点击按钮完成验证。

十、适配结果和当前边界

截图已完整接入。权限声明格式是个坑：CUSTOM_SCREEN_CAPTURE 是 user_grant 权限，module.json5 里必须同时提供 reason（字符串资源）与 usedScene，否则构建直接报 “The reason and usedScene attributes are mandatory for user_grant permissions”。

另外首次调用必须运行时申请：abilityAccessCtrl.requestPermissionsFromUser() 会弹出系统"允许截取你的屏幕？"对话框。用户拒绝时应抛错而不是返回空路径。

十一、FAQ

Q1：首次截图为什么要授权？

现象： CUSTOM_SCREEN_CAPTURE 是 user_grant 权限，首次调用会弹出系统"允许截取你的屏幕？"对话框。
解决方法： 在 module.json5 声明 reason 与 usedScene，运行时用 requestPermissionsFromUser() 申请；用户拒绝时抛错而不是返回空路径。
验证结果： 允许后返回沙箱 PNG 路径，拒绝时拿到明确错误码。