syncfusion-flutter-barcode-generator

Syncfusion Flutter 条码生成器

此技能涵盖 Syncfusion Flutter 条码生成器组件（SfBarcodeGenerator），用于创建机器可读的条码。该组件支持 14 种不同的条码制式，包括常见的 1D 条码（Code128、EAN、UPC 等）和 2D 条码（QR Code、Data Matrix）。

何时使用此技能

在以下情况下使用此技能：

• 生成条码，用于产品、资产或文档
• 实现 QR code，用于网址、联系信息或付款
• 创建产品标签，包含零售条码（EAN、UPC）
• 构建库存系统，使用条码进行追踪
• 生成 Data Matrix 码，用于紧凑的数据编码
• 在 Flutter 应用中添加条码扫描集成
• 创建票券或代金券，使用唯一的条码标识符
• 实现资产追踪，使用条码标签
• 为文档或身份证件生成条码
• 自定义条码外观，设置颜色、文本和样式
• 在单个应用中支持多种条码格式
• 为数据输入工作流显示机器可读码

组件概览

SfBarcodeGenerator 是一个数据可视化组件，旨在生成并显示机器可读格式的数据。它提供：

• 14 种条码制式 - 12 种一维类型和 2 种二维类型
• 可自定义外观 - 可控制颜色、文本样式、间距和条宽
• 轻松集成 - 配置精简的简单 API
• 无障碍支持 - 支持足够的对比度和较大的字体
• 灵活调整大小 - 自动或手动配置模块（条宽）
• 文本显示 - 显示或隐藏输入值，并自定义格式

支持的条码类型

一维（1D）条码 - 12 种类型

条码类型	字符支持	典型使用场景
Codabar	数字 + 特殊字符（-、:、/、+）	图书馆、血库、运输
Code39	字母数字（大写）+ 符号	汽车、国防、医疗保健
Code39Extended	完整 ASCII（全部 128 个字符）	扩展字符编码
Code93	字母数字 + 符号	紧凑编码、物流
Code128	完整 ASCII（自动模式）	通用性最强，适用于运输和包装
Code128A	ASCII 0-95（大写字母 + 控制字符）	控制字符编码
Code128B	ASCII 32-127（大写和小写字母）	标准文本编码
Code128C	数字对（00-99）	数字数据、高密度编码
UPCA	12 位数字	零售产品（北美）
UPCE	8 位数字（紧凑型）	小型包装零售产品
EAN13	13 位数字	国际零售产品
EAN8	8 位数字	小型零售产品

二维（2D）条码 - 2 种类型

条码类型	数据容量	典型使用场景
QR Code	最多 7,089 个数字字符或 4,296 个字母数字字符	网址、联系信息、付款、营销
Data Matrix	最多 3,116 个数字字符或 2,335 个字母数字字符	电子产品、制药、印刷媒体

QR Code 功能：

• 纠错等级（低、中、四分位、高）
• 输入模式（数字、字母数字、二进制、汉字）
• 版本 1-40（21x21 至 177x177 个模块）

Data Matrix 功能：

• 编码类型（自动、ASCII、ASCIINumeric、Base256）
• 方形和矩形格式
• 尺寸紧凑，适用于小型标签

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 在 pubspec.yaml 中添加依赖
• 导入条码软件包
• 基本的 SfBarcodeGenerator 实现
• 创建第一个 1D 条码（Code128）
• 创建第一个 QR code
• 在条码下方显示输入值
• 后续步骤和学习路径

条码类型和符号体系

📄 阅读： references/barcode-types.md

• 全部 12 种一维条码类型及示例
• 全部 2 种二维条码类型及示例
• 各种符号体系的详细属性
• 每种条码类型的输入验证规则
• 字符支持范围和限制
• 如何为使用场景选择合适的条码类型
• 符号体系对比表
• 条码选择最佳实践

自定义和样式设置

📄 阅读： references/customization.md

• 文本自定义（showValue、textStyle、textSpacing、textAlign）
• 条形自定义（module、barColor、backgroundColor）
• 尺寸和布局控制
• 响应式尺寸策略
• 文本样式属性（字体、大小、粗细、颜色）
• 一维和二维条码的条宽（module）配置
• 完整的自定义示例
• 可扫描条码的最佳实践

无障碍功能

📄 阅读： references/accessibility.md

• 充足的对比度支持
• 大字体和文本缩放
• 无障碍颜色自定义
• MediaQueryData 集成
• 无障碍最佳实践
• 可读性测试

快速入门示例

基本 QR Code

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class QRCodeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code')),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: SfBarcodeGenerator(
            value: 'https://www.syncfusion.com',
            symbology: QRCode(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

基本 Code128 条码

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class Code128Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Code128 Barcode')),
      body: Center(
        child: Container(
          height: 150,
          child: SfBarcodeGenerator(
            value: 'SYNCFUSION',
            symbology: Code128(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

零售产品条码（EAN13）

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';

class RetailBarcodeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product Barcode')),
      body: Center(
        child: Container(
          height: 150,
          width: 280,
          child: SfBarcodeGenerator(
            value: '9735940564824',
            symbology: EAN13(),
            showValue: true,
          ),
        ),
      ),
    );
  }
}

常见模式

模式 1：带错误纠正的 QR Code

SfBarcodeGenerator(
  value: 'https://www.example.com/product/12345',
  symbology: QRCode(
    errorCorrectionLevel: ErrorCorrectionLevel.high,
    codeVersion: QRCodeVersion.auto,
    inputMode: QRInputMode.binary,
  ),
  showValue: true,
  textSpacing: 10,
)

模式 2：自定义条码外观

SfBarcodeGenerator(
  value: 'PRODUCT-12345',
  symbology: Code128(module: 2),
  barColor: Colors.deepPurple,
  backgroundColor: Colors.grey[100],
  textStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
  ),
  showValue: true,
  textAlign: TextAlign.center,
  textSpacing: 15,
)

模式 3：列表中的多种条码类型

class BarcodeList extends StatelessWidget {
  final List<BarcodeItem> barcodeTypes = [
    BarcodeItem('Code128', '12345678', Code128()),
    BarcodeItem('QR Code', 'https://example.com', QRCode()),
    BarcodeItem('EAN13', '9735940564824', EAN13()),
    BarcodeItem('Code39', 'CODE39', Code39()),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: barcodeTypes.length,
      itemBuilder: (context, index) {
        final item = barcodeTypes[index];
        return Card(
          margin: EdgeInsets.all(8),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Text(
                  item.name,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 10),
                Container(
                  height: 150,
                  child: SfBarcodeGenerator(
                    value: item.value,
                    symbology: item.symbology,
                    showValue: true,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class BarcodeItem {
  final String name;
  final String value;
  final Symbology symbology;
  
  BarcodeItem(this.name, this.value, this.symbology);
}

模式 4：响应式条码尺寸

class ResponsiveBarcode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final barcodeSize = screenWidth * 0.8;

    return Center(
      child: Container(
        height: barcodeSize,
        width: barcodeSize,
        child: SfBarcodeGenerator(
          value: 'RESPONSIVE-BARCODE',
          symbology: QRCode(),
          showValue: true,
        ),
      ),
    );
  }
}

关键属性

SfBarcodeGenerator 必要属性

属性	类型	描述	默认值
value	String	要编码到条码中的数据	必填
symbology	Symbology	条码类型（Code128、QRCode 等）	Code128
showValue	bool	在条码下方显示输入值	false
barColor	Color	条码条形/模块的颜色	Colors.black
backgroundColor	Color	条码的背景色	Colors.white
textStyle	TextStyle	显示文本的样式	Default TextStyle
textSpacing	double	条码与文本之间的间距	2
textAlign	TextAlign	文本的水平对齐方式	TextAlign.center

常见符号体系属性

属性	适用范围	描述	默认值
module	所有类型	最小条/点的宽度（逻辑像素）	自动计算

Code39 专属属性

属性	类型	描述	默认值
enableCheckSum	bool	为条码添加校验位	true

QR Code 专属属性

属性	类型	描述	默认值
errorCorrectionLevel	ErrorCorrectionLevel	错误恢复级别（低、中、四分位、高）	high
codeVersion	QRCodeVersion	QR 版本 1-40 或自动	auto
inputMode	QRInputMode	输入类型（数字、字母数字、二进制、汉字）	binary

Data Matrix 专属属性

属性	类型	描述	默认值
encoding	DataMatrixEncoding	编码类型（auto、ASCII、ASCIINumeric、base256）	auto
dataMatrixSize	DataMatrixSize	尺寸配置	auto

常见用例

1. 产品标签 - 为零售产品生成 EAN13 或 UPCA 条形码
2. 库存管理 - 使用 Code128 跟踪资产和库存物品
3. 二维码营销 - 为 URL、促销活动和营销活动创建二维码
4. 票券生成 - 为活动门票和凭证生成唯一条形码
5. 文档识别 - 为文档添加 Code39 或 Code128 条形码以便跟踪
6. 支付二维码 - 为支付网关和交易创建二维码
7. 资产跟踪 - 使用 Codabar 或 Code128 为设备和资产贴标签
8. 运输标签 - 使用 Code128 跟踪包裹和物流
9. 图书馆管理 - 使用 Codabar 跟踪书籍和媒体
10. 医疗标签 - 为患者记录和药物生成条形码
11. 联系人分享 - 创建包含 vCard 数据的二维码，用于名片
12. Wi-Fi 分享 - 为 Wi-Fi 凭据生成二维码

相关资源

• 软件包： syncfusion_flutter_barcodes
• API 文档： SfBarcodeGenerator API
• GitHub 示例： Flutter 条形码示例
• 视频教程： Flutter 条形码生成器入门
• 官方文档： Syncfusion Flutter 条形码用户指南