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

发布于 1周前 作者 sinazl 来自 Flutter

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

flutter_qr_code_scaner

[] []

QR码（扫描码/图片）识别（AndroidView/UiKitView）

特性

  • 将二维码放在方形框内以获取二维码信息。
  • 在扫描视图中从本地库选择二维码。

开始使用

首先，确保你已经在项目的pubspec.yaml文件中添加了flutter_qr_code_scaner依赖：

dependencies:
  flutter_qr_code_scaner: ^版本号

然后运行flutter pub get来安装该依赖。

接下来，你可以创建一个简单的页面来使用ScanView：

import 'package:flutter/material.dart';
import 'package:flutter_qr_code_scaner/scan_view.dart'; // 导入扫描视图

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String result = ''; // 用于存储扫描结果

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('二维码扫描示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async { // 按钮点击事件
                String results = await Navigator.push( // 等待扫描结果
                  context,
                  MaterialPageRoute(
                    builder: (context) => ScanView(), // 打开扫描视图
                  ),
                );

                if (results != null) {
                  setState(() { // 更新UI
                    result = results;
                  });
                }
              },
              child: Text("扫码/tap to scan"),
            ),
            Text(result), // 显示扫描结果
          ],
        ),
      ),
    );
  }
}

iOS 特别说明

对于iOS平台，你需要在Info.plist文件中添加以下内容，以允许嵌入视图预览：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

此外，你还需要提供相机权限描述，否则应用会崩溃。请在Info.plist中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>需要使用相机进行二维码扫描</string>

更多关于Flutter二维码扫描插件flutter_qr_code_scaner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter二维码扫描插件flutter_qr_code_scaner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_qr_code_scanner插件来实现二维码扫描功能的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_qr_code_scanner: ^4.0.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，创建一个新的页面或组件来处理二维码扫描。以下是一个完整的示例代码，展示如何使用flutter_qr_code_scanner：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QRCodeScannerPage(),
    );
  }
}

class QRCodeScannerPage extends StatefulWidget {
  @override
  _QRCodeScannerPageState createState() => _QRCodeScannerPageState();
}

class _QRCodeScannerPageState extends State<QRCodeScannerPage> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? _controller;
  String? result = "";

  @override
  void reassemble() {
    super.reassemble();
    if (Platform.isAndroid) {
      _controller?.pauseCamera();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('二维码扫描'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: Text(
                result ?? "扫描结果将显示在这里",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (!mounted) return;
            _controller?.resumeCamera();
          });
        },
        tooltip: 'Resume',
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    setState(() {
      _controller = controller;
      _controller?.scannedDataStream.listen((scanData) {
        setState(() {
          result = scanData;
        });
      });
    });
  }
}

代码解释：

  1. 依赖管理：在pubspec.yaml中添加flutter_qr_code_scanner依赖。

  2. 主应用入口：MyApp类作为应用的入口，设置QRCodeScannerPage为首页。

  3. 二维码扫描页面：QRCodeScannerPage是一个有状态的组件，它包含一个QRView来显示摄像头视图，并监听扫描结果。

  4. QRView和控制器：使用QRView来显示摄像头画面，并在_onQRViewCreated回调中初始化QRViewController。控制器用来管理摄像头的暂停和恢复，以及监听扫描结果。

  5. 扫描结果处理：扫描结果通过scannedDataStream流来获取，并在UI中显示。

  6. 重建和释放资源：在reassemble和dispose方法中，分别处理Android平台的摄像头暂停和资源的释放。

  7. 浮动按钮：添加一个浮动按钮来恢复摄像头（主要用于在暂停后恢复扫描，尽管在这个简单示例中可能不太必要）。

这个示例代码提供了一个基本的二维码扫描功能实现。你可以根据需要进一步扩展，比如添加错误处理、优化UI布局等。

回到顶部