Flutter 鸿蒙化实战：qr_code_scanner_plus 适配 OpenHarmony

前言

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。

为了解决这个问题，CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的 CPF-Flutter 组织 下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。

本篇是系列文章之一，主角是 qr_code_scanner_plus —— 二维码扫描插件。

qr_code_scanner_plus 是什么

flutter_qr_code_scanner（qr_code_scanner_plus，原库 2.0.10）用于调起相机扫描二维码/条形码：

• 扫码：QrScanner 调起相机，扫描结果回调；
• 自定义 UI：通过 overlay 自定义扫描框样式；
• 闪光灯/切换前后摄像头：toggleFlash、flipCamera。

适用于扫码登录、扫码支付、扫码跳转等场景。

适配情况

Flutter 框架版本	TAG 名称	分支名
3.22	2.0.10_1-ohos-1.0.0	master
3.27	2.0.10_1-ohos-1.0.0	master
3.35	2.0.10_1-ohos-1.0.0	master

已验证环境（3.35 为例）：Flutter 3.35.8-ohos-0.0.1；SDK 6.0.1(21)；DevEco Studio 6.0.1.260；ROM 6.0.0.120 SP6。

[!NOTE] 鸿蒙版当前适配 3.22 / 3.27 / 3.35（3.7 未在 README 兼容列表中）。

快速接入

在 pubspec.yaml 中添加 git 依赖：

dependencies:
  qr_code_scanner_plus:
    git:
      url: https://gitcode.com/CPF-Flutter/fluttertpc_qr_code_scanner_plus.git
      # 按你的 Flutter 框架版本，从上方映射表选择对应 TAG
      ref: 2.0.10_1-ohos-1.0.0

执行：

flutter pub get

使用示例

扫码页

import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';

class ScanPage extends StatefulWidget {
  const ScanPage({super.key});
  @override
  State<ScanPage> createState() => _ScanPageState();
}

class _ScanPageState extends State<ScanPage> {
  final GlobalKey _qrKey = GlobalKey();
  QRViewController? _controller;
  String _result = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('扫码')),
      body: Column(
        children: [
          Expanded(
            child: QRView(
              key: _qrKey,
              onQRViewCreated: (controller) async {
                _controller = controller;
                controller.scannedDataStream.listen((scan) {
                  setState(() => _result = scan.code ?? '');
                });
              },
              overlay: QrScannerOverlay(overlayColor: Colors.red.withOpacity(0.2)),
            ),
          ),
          Padding(padding: const EdgeInsets.all(16), child: Text('结果：$_result')),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(onPressed: () => _controller?.toggleFlash(), icon: const Icon(Icons.flash_on)),
              IconButton(onPressed: () => _controller?.flipCamera(), icon: const Icon(Icons.camera_alt)),
            ],
          ),
        ],
      ),
    );
  }
}

API 支持一览

API	说明	ohos 支持
QRView	扫码视图	yes
scannedDataStream	扫码结果流	yes
toggleFlash	切换闪光灯	yes
flipCamera	切换前后摄像头	yes
QrScannerOverlay	自定义扫描框	yes

[!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力，使用方式与 iOS / Android 保持一致。

仓库地址

• OpenHarmony 适配仓库：https://gitcode.com/CPF-Flutter/fluttertpc_qr_code_scanner_plus
• 使用问题反馈：请到 CPF-Flutter 社区 Issues 提交问题（社区统一收集跟进）；本仓库 Issues 区亦可。

系列预告

截至目前，CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配，覆盖权限管理、UI 组件、设备信息、位置服务、媒体处理、网络、支付等多个领域，完整的适配清单（含每个库的版本映射表）见：

• 适配总览文档：https://gitcode.com/CPF-Flutter/docs/blob/main/ThirdpartyLibrarites.md
• 仓库组织：https://gitcode.com/CPF-Flutter

本系列后续会陆续挑选高频库展开讲解，比如图片压缩（flutter_native_image）、Toast 提示（fluttertoast）、日历（device_calendar）、数据库（sqflite）等。

如果你的 Flutter 应用正在计划适配鸿蒙，欢迎关注 CPF-Flutter 组织，也欢迎参与共建。