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

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

qr_scanner_overlay_shape 是一个用于自定义二维码扫描框样式的 Flutter 插件。通过它可以轻松地修改扫描框的颜色、边距、大小等属性。

使用方法

首先，确保你已经添加了 qr_scanner_overlay_shape 依赖到你的 pubspec.yaml 文件中：

dependencies:
  qr_scanner_overlay_shape: ^版本号

接下来，你可以使用 QrScannerOverlayShape 来定制你的扫描框样式。以下是一个完整的示例代码，展示了如何使用 qr_scanner_overlay_shape 插件来创建一个自定义的二维码扫描界面。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('二维码扫描示例'),
        ),
        body: Center(
          child: QrCodeScanner(),
        ),
      ),
    );
  }
}

class QrCodeScanner extends StatefulWidget {
  @override
  _QrCodeScannerState createState() => _QrCodeScannerState();
}

class _QrCodeScannerState extends State<QrCodeScanner> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;

  @override
  void reassemble() {
    super.reassemble();
    if (Platform.isAndroid) {
      controller!.pauseCamera();
    } else if (Platform.isIOS) {
      controller!.resumeCamera();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        QRView(
          key: qrKey,
          onQRViewCreated: _onQRViewCreated,
          overlay: QrScannerOverlayShape(
            borderColor: Colors.white,
            borderRadius: 10,
            borderLength: 20,
            borderWidth: 10,
            cutOutSize: 180,
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            margin: EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: () {
                controller?.toggleFlash();
                setState(() {});
              },
              child: Text('切换手电筒'),
            ),
          ),
        ),
      ],
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      print(scanData.code);
      // 处理扫描结果
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

代码解释

1. 导入必要的库：

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

2. 创建主应用类：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('二维码扫描示例'),
           ),
           body: Center(
             child: QrCodeScanner(),
           ),
         ),
       );
     }
   }
   

3. 创建二维码扫描页面类：

   class QrCodeScanner extends StatefulWidget {
     @override
     _QrCodeScannerState createState() => _QrCodeScannerState();
   }
   
   class _QrCodeScannerState extends State<QrCodeScanner> {
     final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
     QRViewController? controller;
   
     @override
     void reassemble() {
       super.reassemble();
       if (Platform.isAndroid) {
         controller!.pauseCamera();
       } else if (Platform.isIOS) {
         controller!.resumeCamera();
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Stack(
         children: [
           QRView(
             key: qrKey,
             onQRViewCreated: _onQRViewCreated,
             overlay: QrScannerOverlayShape(
               borderColor: Colors.white,
               borderRadius: 10,
               borderLength: 20,
               borderWidth: 10,
               cutOutSize: 180,
             ),
           ),
           Align(
             alignment: Alignment.bottomCenter,
             child: Container(
               margin: EdgeInsets.all(16.0),
               child: ElevatedButton(
                 onPressed: () {
                   controller?.toggleFlash();
                   setState(() {});
                 },
                 child: Text('切换手电筒'),
               ),
             ),
           ),
         ],
       );
     }
   
     void _onQRViewCreated(QRViewController controller) {
       this.controller = controller;
       controller.scannedDataStream.listen((scanData) {
         print(scanData.code);
         // 处理扫描结果
       });
     }
   
     @override
     void dispose() {
       controller?.dispose();
       super.dispose();
     }
   }