Flutter扫码弹窗输入框及二维码数据交互实现问询

一、动态更新二维码内容 #

要实现移动端向二维码传递数据，本质是动态更新QrImage的data参数。通过状态管理修改qrData变量，就能触发UI重建更新二维码内容。

修改你的代码如下：

class QrCode extends StatefulWidget {
  const QrCode({Key? key}) : super(key: key);

  @override
  State<QrCode> createState() => _QrCodeState();
}

class _QrCodeState extends State<QrCode> {
  final qrKey = GlobalKey();
  String qrData = '初始二维码数据';

  // 更新二维码内容的方法
  void updateQrData(String newData) {
    setState(() {
      qrData = newData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RepaintBoundary(
          key: qrKey,
          child: QrImage(
            data: qrData, // 使用动态变量绑定数据
            semanticsLabel: '二维码',
            size: 250,
            backgroundColor: Colors.white,
            version: QrVersions.auto,
          ),
        ),
        // 示例：输入框实时更新二维码内容
        TextField(
          onChanged: (value) => updateQrData(value),
          decoration: const InputDecoration(hintText: '输入新的二维码内容'),
        ),
      ],
    );
  }
}

调用updateQrData方法时，可传入任意字符串（比如接口返回值、用户输入内容），实现二维码内容的动态更新。

二、扫码后弹出带输入框的弹窗 #

扫码功能需搭配扫码插件（如qr_code_scanner）实现，扫码成功后触发弹窗获取用户输入，再将输入值用于后续逻辑。

1. 扫码页面核心实现 #

import 'package:qr_code_scanner/qr_code_scanner.dart';

class QrScannerPage extends StatefulWidget {
  const QrScannerPage({Key? key}) : super(key: key);

  @override
  State<QrScannerPage> createState() => _QrScannerPageState();
}

class _QrScannerPageState extends State<QrScannerPage> {
  final qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;
  bool isScanned = false; // 避免重复触发扫码逻辑

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: QRView(
        key: qrKey,
        onQRViewCreated: _onQRViewCreated,
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      if (!isScanned) {
        isScanned = true;
        controller.pauseCamera(); // 扫码成功后暂停相机
        _showInputDialog(scanData.code); // 弹出输入框弹窗
      }
    });
  }

  // 带输入框的弹窗实现
  void _showInputDialog(String? qrContent) {
    TextEditingController inputController = TextEditingController();
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('扫码成功'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('扫码内容：$qrContent'),
            TextField(
              controller: inputController,
              decoration: const InputDecoration(hintText: '请输入需要的值'),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              controller?.resumeCamera(); // 返回后恢复相机
              isScanned = false;
            },
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () {
              String inputValue = inputController.text.trim();
              if (inputValue.isNotEmpty) {
                // 这里处理输入值的后续逻辑，比如提交接口、本地存储等
                print('扫码内容：$qrContent，用户输入：$inputValue');
                Navigator.pop(context, {'qrContent': qrContent, 'inputValue': inputValue});
              }
            },
            child: const Text('确认'),
          ),
        ],
      ),
    ).then((result) {
      if (result != null) {
        // 处理弹窗返回的结果
        print('返回结果：$result');
      }
      controller?.resumeCamera();
      isScanned = false;
    });
  }
}

2. 关键逻辑说明 #

• 扫码成功后立即暂停相机，防止重复触发弹窗
• 弹窗同时展示扫码内容和输入框，用户输入完成后，可同时获取扫码数据和输入值，直接用于后续业务逻辑
• 取消或确认操作后恢复相机，允许再次扫码

三、注意事项 #

• 扫码插件需配置权限：Android端在AndroidManifest.xml中添加相机权限，iOS端在Info.plist中添加相机权限描述
• 若需跨页面传递二维码数据，可使用Provider、Riverpod等状态管理工具简化逻辑

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