如何在Flutter笔记本价格预测App中为每次预测结果生成二维码？

问题背景 #

我基于Flutter开发了一款带笔记本电脑价格预测功能的移动应用，现在要加个新功能：

• 用户完成一次价格预测后，App自动生成二维码，二维码里存本次预测对应的笔记本价格、全量配置参数
• 其他用户扫这个二维码，不需要手动逐项填参数，App自动把配置填充到表单里
  相关参考界面：
  
  
  

实现方案 #

整个功能拆成三块做就行，全用成熟的开源包，不用自己写底层逻辑，半小时就能接完。

1. 先定好二维码里存的数据格式 #

别搞花里胡哨的自定义编码，直接用JSON存，通用性强后续改字段也方便。记得加个类型标识，避免用户扫到付款码、其他无关二维码的时候App直接崩溃。
示例数据结构：

// 字段和你现有表单的参数一一对应就行
final Map<String, dynamic> qrPayload = {
  "t": "lp_predict", // 类型标识，短一点省空间
  "price": 6499, // 预测出来的价格
  "cfg": {
    "brand": "HP",
    "cpu": "R7-7840H",
    "gpu": "RTX4060",
    "ram": 16,
    "rom": 1024,
    "screen": 16,
    "refresh": 144,
    // 剩下的配置字段按你自己的表单补全
  }
};
// 转成字符串直接塞给二维码组件就行
final String qrContent = jsonEncode(qrPayload);

提醒一句：二维码能存的内容有限，别塞没用的字段，字段名尽量短，总内容控制在200字符以内，不然生成的二维码太密，差一点的手机摄像头扫半天扫不出来。

2. 预测结果页生成二维码 #

直接用qr_flutter包，维护得很稳定，不用自己写二维码绘制：

1. 先在pubspec.yaml加依赖：qr_flutter: ^4.1.0
2. 找到你现在价格展示的组件，在下面直接插二维码组件就行，示例代码：

// 放在价格文本组件下方
Container(
  margin: const EdgeInsets.symmetric(vertical: 24),
  child: Column(
    children: [
      QrImageView(
        data: qrContent,
        version: QrVersions.auto,
        size: 200,
        padding: const EdgeInsets.all(12),
        backgroundColor: Colors.white,
      ),
      const SizedBox(height: 8),
      const Text("扫码自动填充该笔记本配置", style: TextStyle(fontSize: 12, color: Colors.grey))
    ],
  ),
)

3. 做扫码页+自动填充逻辑 #

扫码用mobile_scanner包，比老的qr_code_scanner兼容性好，新老版本Android、iOS都能跑，不用改原生配置太多：

1. 加依赖：mobile_scanner: ^3.5.6
2. 在配置填写页加个扫码按钮，点了跳转到扫码页
3. 扫到内容之后按下面的逻辑校验、填充：
   • 先尝试把扫到的内容解析成JSON，解析失败直接弹“无效二维码”
   • 校验最外层的t字段是不是你之前定的lp_predict，不是就提示“不是有效的笔记本配置二维码”
   • 校验通过就把cfg里的字段挨个赋值给你表单的TextEditingController，自动填完所有选项，顺便弹个提示把预测价格告诉用户
     核心解析代码：

void onScanResult(BarcodeCapture capture) {
  final barcode = capture.barcodes.first;
  final rawStr = barcode.rawValue;
  if (rawStr == null) return;
  try {
    final payload = jsonDecode(rawStr);
    if (payload['t'] != 'lp_predict') {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('不是有效的配置二维码')));
      return;
    }
    // 开始填充表单
    final cfg = payload['cfg'];
    brandController.text = cfg['brand'] ?? '';
    ramController.text = cfg['ram']?.toString() ?? '';
    romController.text = cfg['rom']?.toString() ?? '';
    // 剩下的下拉选择、输入框字段都按这个逻辑赋值就行
    // 提示价格
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('配置填充完成，该机型预测价格为${payload['price']}元')));
    // 关掉扫码页回到表单页
    Navigator.pop(context);
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('二维码解析失败，请重试')));
  }
}

最后别忘了配权限 #

• Android端：在AndroidManifest.xml里加相机权限声明<uses-permission android:name="android.permission.CAMERA" />
• iOS端：在Info.plist里加NSCameraUsageDescription，描述写“需要相机权限扫描配置二维码”

内容的提问来源于stack exchange，提问作者Lokman