插件介绍

Flutter TPC Mobile Scanner 是一个基于 MLKit 的通用条形码和 QR 码扫描器，专为 Flutter 应用设计。该插件提供了高性能、跨平台的扫码功能，支持多种条形码格式，并提供了丰富的配置选项和控制功能。

主要特性

• ✅ 跨平台支持：兼容鸿蒙、Android、iOS、macOS 和 Web 平台
• ✅ 高性能：基于 MLKit 实现，提供快速准确的扫码体验
• ✅ 多种扫码格式：支持各种常见的条形码和 QR 码格式
• ✅ 丰富的控制功能：支持手电筒控制、相机切换、缩放等
• ✅ 图像返回：可选择返回扫描的图像数据
• ✅ 扫描窗口：支持自定义扫描区域
• ✅ 条形码覆盖层：提供可视化的扫码引导
• ✅ 灵活的 API：支持有无控制器的两种使用方式

安装与配置

由于这是一个针对鸿蒙系统优化的自定义修改版本，需要通过 Git 依赖的方式引入。

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  mobile_scanner:
    git:
      url: "https://github.com/[your-repo]/fluttertpc_mobile_scanner.git"
      path: "fluttertpc_mobile_scanner"

请将 [your-repo] 替换为实际的仓库地址。

2. 鸿蒙平台配置

权限配置

在鸿蒙应用的配置文件中添加相机权限：

<!-- 在 config.json 或 module.json5 中添加 -->
"reqPermissions": [
  {
    "name": "ohos.permission.CAMERA"
  }
]

API 使用示例

基本使用（无控制器）

这是最简单的使用方式，适合只需要基本扫码功能的场景：

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

class ScannerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('条形码扫描器')),
      body: MobileScanner(
        onDetect: (capture) {
          final List<Barcode> barcodes = capture.barcodes;
          for (final barcode in barcodes) {
            if (barcode.rawValue != null) {
              debugPrint('扫描结果: ${barcode.rawValue}');
              // 处理扫描结果
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('扫描结果: ${barcode.rawValue}')),
              );
            }
          }
        },
      ),
    );
  }
}

使用控制器（推荐）

使用控制器可以获得更多功能，如手电筒控制、相机切换等：

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

class AdvancedScannerScreen extends StatefulWidget {
  @override
  _AdvancedScannerScreenState createState() => _AdvancedScannerScreenState();
}

class _AdvancedScannerScreenState extends State<AdvancedScannerScreen> {
  final MobileScannerController _controller = MobileScannerController(
    detectionSpeed: DetectionSpeed.normal,
    facing: CameraFacing.back,
    torchEnabled: false,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('高级扫描器'),
        actions: [
          // 手电筒控制
          ValueListenableBuilder(
            valueListenable: _controller.torchState,
            builder: (context, state, child) {
              return IconButton(
                color: Colors.white,
                icon: Icon(
                  state == TorchState.on ? Icons.flash_on : Icons.flash_off,
                  color: state == TorchState.on ? Colors.yellow : Colors.grey,
                ),
                onPressed: () => _controller.toggleTorch(),
              );
            },
          ),
          // 相机切换
          ValueListenableBuilder(
            valueListenable: _controller.cameraFacingState,
            builder: (context, state, child) {
              return IconButton(
                color: Colors.white,
                icon: Icon(
                  state == CameraFacing.front 
                    ? Icons.camera_front 
                    : Icons.camera_rear,
                ),
                onPressed: () => _controller.switchCamera(),
              );
            },
          ),
        ],
      ),
      body: MobileScanner(
        controller: _controller,
        onDetect: (capture) {
          final List<Barcode> barcodes = capture.barcodes;
          for (final barcode in barcodes) {
            if (barcode.rawValue != null) {
              debugPrint('扫描结果: ${barcode.rawValue}');
              // 处理扫描结果
              _showResultDialog(context, barcode.rawValue!);
            }
          }
        },
      ),
    );
  }

  void _showResultDialog(BuildContext context, String result) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('扫描结果'),
        content: Text(result),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确定'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

返回扫描图像

如果需要获取扫描时的图像，可以启用 returnImage 选项：

import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'dart:typed_data';

class ScannerWithImageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('带图像返回的扫描器')),
      body: MobileScanner(
        controller: MobileScannerController(
          returnImage: true,
        ),
        onDetect: (capture) {
          final List<Barcode> barcodes = capture.barcodes;
          final Uint8List? image = capture.image;
          
          // 处理扫描结果
          for (final barcode in barcodes) {
            if (barcode.rawValue != null) {
              debugPrint('扫描结果: ${barcode.rawValue}');
            }
          }
          
          // 显示扫描图像
          if (image != null) {
            showDialog(
              context: context,
              builder: (context) => Dialog(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Text('扫描图像'),
                    ),
                    Image.memory(image),
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('关闭'),
                    ),
                  ],
                ),
              ),
            );
          }
        },
      ),
    );
  }
}

高级功能

自定义扫描区域

你可以通过 scanWindow 属性自定义扫描区域：

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

class CustomScanAreaScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义扫描区域')),
      body: Stack(
        children: [
          MobileScanner(
            scanWindow: Rect.fromCenter(
              center: MediaQuery.of(context).size.center(Offset.zero),
              width: 250,
              height: 250,
            ),
            onDetect: (capture) {
              final List<Barcode> barcodes = capture.barcodes;
              for (final barcode in barcodes) {
                if (barcode.rawValue != null) {
                  debugPrint('扫描结果: ${barcode.rawValue}');
                }
              }
            },
          ),
          // 添加自定义扫描框覆盖层
          Center(
            child: Container(
              width: 250,
              height: 250,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.green, width: 2),
                borderRadius: BorderRadius.circular(8),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

检测速度控制

可以通过 detectionSpeed 属性控制扫描速度，避免重复扫描：

MobileScanner(
  controller: MobileScannerController(
    detectionSpeed: DetectionSpeed.noDuplicates,
  ),
  onDetect: (capture) {
    // 处理扫描结果
  },
)

条形码类型处理

可以根据条形码类型进行不同的处理：

MobileScanner(
  onDetect: (capture) {
    final List<Barcode> barcodes = capture.barcodes;
    for (final barcode in barcodes) {
      if (barcode.rawValue != null) {
        debugPrint('扫描结果: ${barcode.rawValue}');
        debugPrint('条形码类型: ${barcode.type}');
        debugPrint('条形码格式: ${barcode.format}');
        
        // 根据类型进行不同处理
        switch (barcode.type) {
          case BarcodeType.url:
            // 处理URL
            break;
          case BarcodeType.wifi:
            // 处理WiFi信息
            if (barcode.wifi != null) {
              debugPrint('WiFi SSID: ${barcode.wifi!.ssid}');
              debugPrint('WiFi 密码: ${barcode.wifi!.password}');
            }
            break;
          case BarcodeType.geoPoint:
            // 处理地理位置
            break;
          // 其他类型处理
          default:
            break;
        }
      }
    }
  },
)

总结

Flutter TPC Mobile Scanner 是一个功能强大的条形码和 QR 码扫描解决方案，为鸿蒙系统提供了完整的扫码支持。通过本文的介绍，您可以了解如何在鸿蒙应用中集成和使用该插件，包括：

1. 通过 Git 依赖的方式引入自定义修改版本
2. 基本的扫码功能实现
3. 使用控制器获得更多控制能力
4. 高级功能如图像返回、自定义扫描区域等
5. 条形码类型的处理

该插件提供了简洁易用的 API 和丰富的功能选项，可以满足各种扫码需求。无论是简单的二维码扫描还是复杂的条形码处理，Flutter TPC Mobile Scanner 都能提供出色的性能和用户体验。

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