条形码生成是工具箱里的一个高频功能：输入一段内容，选择编码格式，立刻预览并按需保存/分享。

这篇文章不把“生成条形码”讲成一堆算法推导，而是按真实项目里的实现路径来拆：

• 入口怎么挂到工具列表
• 点击后弹窗怎么组织输入/输出
• 格式选择和内容编码怎么落地
• 预览、保存/分享这些收尾细节怎么处理

条形码生成工具的应用

条形码在商业和物流中有广泛的应用。用户可以使用条形码来标记产品、追踪物流等。

在工具页面中，条形码生成工具已经定义在工具列表中：

{'icon': Icons.barcode_reader, 'title': '条形码生成'},

说明

上面这一条就是“条形码生成”在工具箱里的入口。

• icon：负责在列表里给用户一个足够直观的识别。
• title：后续会当作弹窗标题/埋点名称使用（你也可以在点击事件里用它做分发）。

条形码生成对话框的实现

当用户点击条形码生成工具时，会显示一个对话框。这个对话框提供了输入和输出的界面：

void _showToolDetail(BuildContext context, String title) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(title),

说明

这里把“工具详情”做成 AlertDialog，好处是实现快、交互足够轻量。

• title：直接复用工具列表的标题，减少重复定义。
• showDialog：弹窗默认会拦截背景点击（具体取决于 barrierDismissible），在工具类功能里通常更符合预期。

接下来是弹窗主体部分：

      content: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [

说明

这里用 SingleChildScrollView 主要是为了规避键盘弹起/小屏设备时的溢出问题。

• mainAxisSize: MainAxisSize.min：让弹窗内容尽量“包裹内容”，不会把对话框撑得过高。

输入框部分：

            TextField(
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '输入内容',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.r)
                ),
              ),
            ),

说明

输入框是条形码的“源数据”。在实际使用里这里建议做两件事：

• 输入约束：例如 EAN-13 只允许数字，Code39 只允许大写字母/数字/少量符号。
• 交互细节：maxLines: 4 更像是工具类输入，不会把布局挤坏。

输出框部分：

            SizedBox(height: 12.h),
            TextField(
              readOnly: true,
              maxLines: 4,
              decoration: InputDecoration(
                hintText: '输出结果',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.r)
                ),
              ),
            ),

说明

这里用 readOnly: true 明确告诉用户：输出由工具生成，不需要（也不应该）手动编辑。

• 输出内容：可以是编码后的字符串、校验后的标准化文本，或者是你渲染条码组件时最终使用的值。

弹窗按钮部分：

          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('关闭'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('执行'),
        ),
      ],
    ),
  );
}

说明

现在“执行”按钮只是关闭弹窗，实际项目里通常会把它改成“生成/预览”，然后：

• 先校验输入（不符合格式就提示用户）
• 再生成结果（更新输出框/预览区域）
• 最后允许保存或分享（放在弹窗底部或二级菜单）

条形码格式的支持

条形码生成工具可以支持多种格式，包括Code128、Code39、EAN-13等。每种格式都有其特定的编码规则和应用场景。

Code128是最常用的格式，支持所有ASCII字符。Code39是一种较为简单的格式，只支持大写字母和数字。EAN-13是国际标准的商品条形码格式。

说明

做工具时我一般会把“格式支持”拆成两层：

• UI 层的格式枚举：给用户选项（比如下拉/单选）。
• 业务层的校验与编码：真正决定哪些输入能生成、怎么生成。

条形码的编码实现

条形码的编码需要根据选择的格式进行相应的转换。例如，Code128编码需要计算校验位，确保条形码的准确性。

String _encodeCode128(String input) {
  // Code128编码逻辑
  return '║' + input.replaceAll('', '║') + '║';
}

说明

这一段把 Code128 的编码逻辑封装成单独方法，调用侧只关心传入 input、得到结果。

• 优点：后续要替换成更严格的 Code128 实现时，UI 基本不用动。

String _encodeCode39(String input) {
  // Code39编码逻辑
  return '*' + input + '*';
}

说明

Code39 常见的处理方式是加起止符（这里用 * 表达），实际使用时更要注意输入字符范围。

String _encodeEAN13(String input) {
  // EAN-13编码逻辑
  return input.padRight(13, '0').substring(0, 13);
}

说明

EAN-13 的关键点是 位数与校验。这段代码先把长度补到 13 再截断，属于“保证输出长度”的处理。

• 如果你希望更严格：建议在生成前做“必须为数字、长度必须为 12 或 13”的校验，不通过就提示，而不是直接补 0。

条形码的预览

生成的条形码可以在对话框中预览。用户可以看到生成的条形码，并确认内容是否正确。

说明

预览阶段建议把“可见反馈”做得更明确一些：

• 预览区域：让用户能第一时间确认条码是否可扫码。
• 展示当前格式：避免用户选错格式但误以为生成失败。

条形码的保存和分享

生成的条形码可以保存到本地文件系统，或者分享给其他应用。这需要使用文件系统API和分享API来实现。

说明

保存/分享一般不直接耦合在“编码方法”里，而是放在 UI 层的按钮事件中处理：

• 保存：把预览生成的结果（图片或字符串）落到文件。
• 分享：将保存后的文件路径或内存数据交给系统分享能力。

条形码内容的验证

在生成条形码之前，我们应该验证输入的内容。例如，对于EAN-13格式，输入的内容应该是数字。

说明

这一块建议你在交互上做得“更像工具”：

• 就地提示：输入框下方提示错误原因（位数不对、含非法字符等）。
• 按钮状态：不合法时“执行/生成”按钮置灰，减少无效点击。

总结

条形码生成工具展示了如何在Flutter应用中实现条形码生成功能。通过支持多种条形码格式，我们为用户提供了一个完整的条形码生成解决方案。

如果你打算把这个工具做得更“能用”，我建议按顺序补齐：

• 格式选择控件：先让用户明确选中 Code128 / Code39 / EAN-13。
• 输入校验：把报错做得具体，别只给“输入不合法”。
• 预览与导出：预览确认没问题后，再保存/分享。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net