Flutter使用qr_code_scanner库时如何暂停二维码扫描读取

问题描述 #

使用qr_code_scanner 0.5.2版本开发二维码扫描App时，出现以下问题：扫描到二维码后App携带结果跳转到新页面，但扫描功能仍在持续运行，只要摄像头对准二维码就会不断弹出新页面，直到摄像头离开二维码才会停止。需要实现逐次扫描逻辑：跳转其他页面时暂停扫描，新页面关闭后再自动恢复扫描。

原有问题代码 #

void _onQRViewCreated(QRViewController controller) {
setState(() {
  this.controller = controller;
});
controller.scannedDataStream.listen((scanData) {
  setState(() {
    controller.pauseCamera();
    Navigator.push(context,
      MaterialPageRoute(builder: (context) {
        return ReadData(data: scanData.code);
      }),
    );
    controller.resumeCamera();
  });
});
}

问题根因 #

Navigator.push是异步方法，原有代码中调用push后没有等待页面返回，直接同步执行了controller.resumeCamera()，导致摄像头立刻恢复扫描，短时间内多次触发扫码回调，不断弹出新页面。

修正后代码 #

void _onQRViewCreated(QRViewController controller) {
  this.controller = controller;

controller.scannedDataStream.listen((scanData) async {
 
  controller.pauseCamera();
  await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) {
      return ReadData(data: scanData.code);
    }),
  );
  
  controller.resumeCamera();
});
}

逻辑说明 #

• 给扫码流的监听回调添加async修饰，支持异步等待操作
• 扫码成功后第一时间调用controller.pauseCamera()暂停摄像头扫描，避免重复触发扫码事件
• 通过await关键字等待Navigator.push执行完成，也就是等跳转的结果页面完全关闭后，才会执行后续代码
• 结果页面关闭后再调用controller.resumeCamera()恢复扫描功能，符合逐次扫描的需求

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