Flutter二维码扫描插件twitter_qr_scanner的使用

QR Code Scanner（二维码扫描器）

QR Code scan page like Twitter.

示例

安装

要使用此插件，在 pubspec.yaml 文件中添加 twitter_qr_scanner 作为依赖项：

dependencies:
  twitter_qr_scanner: any

执行以下命令以安装依赖：

flutter pub get

使用步骤

初始化

首先，定义一个全局的 GlobalKey 和 QRViewController：

GlobalKey qrKey = GlobalKey();
QRViewController controller;

构建二维码扫描界面

在 QRView 中配置扫描区域，并绑定扫描回调函数：

QRView(
  key: qrKey, // 全局键用于访问控制器
  overlay: QrScannerOverlayShape( // 自定义扫描框样式
    borderRadius: 16, // 圆角大小
    borderColor: Colors.white, // 边框颜色
    borderLength: 120, // 边框长度
    borderWidth: 10, // 边框宽度
    cutOutSize: 250, // 扫描窗口大小
  ),
  onQRViewCreated: _onQRViewCreate, // 扫描回调
  data: "QR TEXT", // 显示的文本数据
)

处理扫描结果

在 _onQRViewCreate 方法中，监听扫描流并处理扫描到的数据：

void _onQRViewCreate(QRViewController controller) {
  this.controller = controller; // 保存控制器实例
  controller.scannedDataStream.listen((scanData) { // 监听扫描数据流
    setState(() { // 更新 UI
      print("QRCode: $scanData"); // 打印扫描结果
    });
  });
}

销毁资源

确保在组件销毁时释放资源：

[@override](/user/override)
void dispose() {
  controller?.dispose(); // 释放 QRViewController 资源
  super.dispose();
}

Android 集成

该插件仅支持 SDK 版本大于 21 的设备。

iOS 集成

在 Info.plist 文件中添加以下配置：

<key>io.flutter.embedded_views_preview</key>
<true/>

完整示例代码

以下是一个完整的示例代码，展示如何使用 twitter_qr_scanner 插件进行二维码扫描：

import 'package:flutter/material.dart';
import 'package:twitter_qr_scanner/twitter_qr_scanner.dart';
import 'package:twitter_qr_scanner/QrScannerOverlayShape.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Scanner Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => QRScanPage()),
            );
          },
          child: Text('Scan QR Code'),
        ),
      ),
    );
  }
}

class QRScanPage extends StatefulWidget {
  [@override](/user/override)
  _QRScanPageState createState() => _QRScanPageState();
}

class _QRScanPageState extends State<QRScanPage> {
  GlobalKey qrKey = GlobalKey();
  QRViewController? controller;
  String qrText = "尚未扫描";

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(title: Text('Scan QR Code')),
      body: QRView(
        key: qrKey,
        overlay: QrScannerOverlayShape(
          borderRadius: 16,
          borderColor: Colors.white,
          borderLength: 120,
          borderWidth: 10,
          cutOutSize: 250,
        ),
        onQRViewCreated: _onQRViewCreate,
        data: "QR TEXT",
      ),
    );
  }

  void _onQRViewCreate(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData.code.toString(); // 更新扫描结果
        print("QRCode: $qrText");
      });
    });
  }

  [@override](/user/override)
  void dispose() {
    controller?.dispose(); // 释放资源
    super.dispose();
  }
}