一、插件介绍

fluttertpc_recognition_qrcode是一款基于GoogleMLKit框架开发的Flutter二维码识别插件，专门为鸿蒙系统进行了适配优化。它提供了简单易用的API接口，能够快速识别图片中的二维码、条形码等多种码制，支持识别包含多个码的图片。

主要功能特点：

• 多码制支持：基于GoogleMLKit框架，支持识别二维码、条形码等多种码制
• 多输入方式：支持通过本地文件路径、网络URL和base64数据进行识别
• 多码识别：能够识别图片中包含的多个二维码或条形码
• 灵活配置：支持自定义识别界面的图标、文字大小和内容
• 鸿蒙适配：专门为鸿蒙系统进行了适配，提供了完整的鸿蒙系统支持
• 简单易用：提供简洁的API接口，方便开发者快速集成

二、安装与配置

2.1 引入依赖

由于该插件是针对鸿蒙系统的自定义修改版本，需要通过Git方式引入。在项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  recognition_qrcode:
    git:
      url: https://gitcode.com/openharmony-sig/fluttertpc_recognition_qrcode.git

添加依赖后，执行以下命令获取依赖：

flutter pub get

2.2 鸿蒙系统特有配置

在鸿蒙系统上使用该插件，需要进行以下额外配置：

2.2.1 复制能力和页面文件

1. 复制插件中的CodeAbility.ets文件到项目的对应目录：

   example/ohos/entry/src/main/ets/entryability/CodeAbility.ets
   

2. 复制插件中的CodePage.ets文件到项目的对应目录：

   example/ohos/entry/src/main/ets/pages/CodePage.ets
   

3. 复制插件中的图标资源文件到项目的对应目录：

   example/ohos/entry/src/main/resources/base/media/bx_right_arrow.png
   

2.2.2 修改模块配置文件

在项目的entry/src/main/module.json5文件中，在abilities数组中添加以下配置：

{
 "name": "CodeAbility",
 "srcEntry": "./ets/entryability/CodeAbility.ets",
 "description": "$string:EntryAbility_desc",
 "icon": "$media:icon",
 "label": "$string:EntryAbility_label",
 "startWindowIcon": "$media:icon",
 "startWindowBackground": "$color:start_window_background",
 "exported": true
}

三、API使用

3.1 配置识别参数

使用RecognitionManager.setConfig()方法可以配置识别界面的相关参数：

import 'package:recognition_qrcode/recognition_qrcode.dart';

// 配置识别参数
RecognitionManager.setConfig(
  // icon: "assets/bx-right-arrow.png", // 箭头图标路径
  iconWidth: 30, // 箭头图标宽度
  iconHeight: 30, // 箭头图标高度
  cancelTitleFontSize: 16, // 取消按钮文字大小
  cancelTitle: "取消", // 取消按钮文字
);

参数说明：

• icon：可选，箭头图标的本地资源路径
• iconWidth：可选，箭头图标的宽度，默认值为30
• iconHeight：可选，箭头图标的高度，默认值为30
• cancelTitleFontSize：可选，取消按钮的文字大小，默认值为16
• cancelTitle：可选，取消按钮的文字内容，默认值为"取消"

3.2 识别二维码

使用RecognitionManager.recognition()方法可以识别图片中的二维码：

// 识别网络图片中的二维码
RecognitionManager.recognition(
  "https://tool.oschina.net/action/qrcode/generate?data=1231231231&output=image%2Fpng&error=L&type=0&margin=7&size=4.png"
).then((result) {
  print("识别结果: ${result.value}");
}).catchError((onError) {
  print("识别错误: $onError");
});

该方法支持三种输入方式：

1. 本地文件路径：

   RecognitionManager.recognition("/path/to/image.jpg");
   

2. 网络URL：

   RecognitionManager.recognition("https://example.com/qrcode.png");
   

3. Base64数据：

   RecognitionManager.recognition("base64字符串");
   

3.3 识别结果处理

recognition()方法返回一个RecognitionResult对象，包含以下字段：

• code：识别结果状态码
• value：识别出的二维码内容

RecognitionManager.recognition(imagePath).then((result) {
  if (result.code == "success") {
    print("识别成功: ${result.value}");
  } else {
    print("识别失败: ${result.code}");
  }
});

四、实际应用示例

以下是一个完整的示例，展示如何使用image_picker选择图片并进行二维码识别：

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:recognition_qrcode/recognition_qrcode.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  RecognitionResult? result;

  @override
  void initState() {
    super.initState();
    // 初始化配置
    RecognitionManager.setConfig(
      iconWidth: 30,
      iconHeight: 30,
      cancelTitleFontSize: 16,
      cancelTitle: "取消",
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('二维码识别示例'),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                child: Text("选择图片并识别"),
                onPressed: () {
                  final picker = ImagePicker();
                  picker.pickImage(source: ImageSource.gallery).then((XFile? value) {
                    if (value == null) {
                      return;
                    }
                    // 识别图片中的二维码
                    RecognitionManager.recognition(value.path).then((result) {
                      print("识别结果: $result");
                      setState(() {
                        this.result = result;
                      });
                    }).catchError((onError) {
                      print("识别错误: $onError");
                    });
                  });
                },
              ),
              SizedBox(height: 20),
              Text(result?.value ?? "识别结果将显示在这里"),
            ],
          ),
        ),
      ),
    );
  }
}

五、注意事项与兼容性

1. 兼容性：

   • Flutter版本：已在Flutter 3.7.12-ohos-1.1.3和Flutter 3.22.1-ohos-1.0.3版本上测试通过
   • 鸿蒙SDK：支持5.0.0(12)及以上版本
   • IDE：推荐使用DevEco Studio 5.1.0.828及以上版本

2. iOS模拟器限制：由于GoogleMLKit的限制，该插件不支持在iOS模拟器上运行

3. 权限配置：如果使用图片选择功能，需要在项目中配置相应的权限

4. 长路径限制：在Windows系统上使用时，可能会遇到长路径限制问题

六、总结

fluttertpc_recognition_qrcode是一款功能强大、使用简单的Flutter二维码识别插件，专门为鸿蒙系统进行了适配优化。它基于GoogleMLKit框架，支持多种码制和输入方式，能够满足开发者在鸿蒙系统上进行二维码识别的需求。

通过本文的介绍，您已经了解了该插件的基本功能、安装配置方法、API使用方式以及鸿蒙系统特有的适配步骤。希望本文能够帮助您快速集成和使用该插件，实现二维码识别功能。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net