Flutter二维码生成与扫描插件qrcode_component的使用

QRCodeComponent

QRCodeComponent 是一个在 Flutter 应用程序中轻松生成二维码的 Flutter 小部件。它提供了各种自定义选项，并支持将二维码渲染为画布、SVG 或图像元素。

安装

要使用此包，在你的 pubspec.yaml 文件中添加 qrcode_component 作为依赖项。

dependencies:
  qrcode_component: ^2.1.0

然后，在 Dart 代码中导入该包：

import 'package:qrcode_component/qr_code.dart';

使用

只需将 QRCodeComponent 小部件添加到你的 Flutter UI 树中，并根据所需属性进行配置。

QRCodeComponent(
  qrData: 'Hello, World!', // 提供二维码的数据
  width: 200, // 设置二维码宽度
  height: 200, // 设置二维码高度
  errorCorrectionLevel: QrErrorCorrectLevel.L, // 设置错误纠正级别
  color: Colors.black, // 设置二维码颜色
  backgroundColor: Colors.white, // 设置背景颜色
  imageUrl: 'assets/images/logo.png', // 设置本地或外部图像源
  imageSrc: 'https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg',
  onStartGenerate: () => { // 开始生成时调用
    print('start')
  },
  onFinishGenerate: () => { // 生成完成时调用
    print('end')
  },
),

属性

• color: 二维码暗模块的颜色。// 默认: 黑色
• backgroundColor: 二维码亮模块的颜色。// 默认: 白色
• imageSrc: 本地资产或外部图像源的路径或 URL，用于覆盖在二维码上。// 默认: 无
• imageUrl: 外部资产图像源的路径或 URL，用于覆盖在二维码上。// 默认: 无
• width: 二维码的宽度。// 默认: 200
• height: 二维码的高度。// 默认: 200
• qrData: 编码在二维码中的数据。// 必须提供
• errorCorrectionLevel: 二维码的错误纠正级别。// 默认: 1
  • static const int L = 1;
  • static const int M = 0;
  • static const int Q = 3;
  • static const int H = 2;
• onStartGenerate: 在二维码生成过程开始时调用的回调。
• onFinishGenerate: 在二维码生成过程完成后调用的回调。
• version: 二维码的版本（大小）。

示例

在 /example 目录下有一个简单的、可工作的示例 Flutter 应用程序。你可以使用它来尝试所有选项。

以下示例给出了如何使用库的快速概述。

基本的二维码看起来像这样：

QRCodeComponent(
  qrData: 'Your QR Code Data Here', // 提供二维码的数据
)

示例代码

import 'package:flutter/material.dart';
import 'package:qrcode_component/qr_code.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: QRCodeComponent(
          qrData: 'Your QR Code Data Here',
          imageSrc: 'images/flutter-logo.png',
          version: 10,
          errorCorrectionLevel: 2,
          backgroundColor: Colors.red,
          onStartGenerate: () => {
            print('start')
          },
          onFinishGenerate: () => {
            print('end')
          },
        ),
      ),
    );
  }
}