目次
实现效果
实现步调
1.引入扫码依赖
这里利用的是qr_code_scanner
dependencies: qr_code_scanner: ^1.0.12.添加代码
扫码页面的代码如下：
class ScanQrCodePage extends StatefulWidget { const ScanQrCodePage({Key? key}) : super(key: key); @override State<ScanQrCodePage> createState() => _ScanQrCodePageState();}class _ScanQrCodePageState extends State<ScanQrCodePage> { final GlobalKey qrKey = GlobalKey(debugLabel: 'QR'); Barcode? result; QRViewController? controller; @override void reassemble() { super.reassemble(); if (Platform.isAndroid) { controller!.pauseCamera(); } else if (Platform.isIOS) { controller!.resumeCamera(); } } void _onQRViewCreated(QRViewController controller) { controller.resumeCamera(); setState(() { this.controller = controller; }); controller.scannedDataStream.listen((scanData) { setState(() { result = scanData; controller?.dispose(); Get.back(result: scanData?.code); }); }); } @override void dispose() { controller?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: WidgetFactory.createAppBar("扫码"), body: Container( child: QRView( key: qrKey, onQRViewCreated: _onQRViewCreated, ), ), ); }}吸收扫码效果的关键代码如下(注：这里我跳转路由利用的是三方库get)：
GestureDetector( onTap: () async { var scancode = await Get.toNamed(PageNameData.PAGE_SCANQRCODEPAGE); setState(() { _unameController.text = scancode; }); print(future); }, child: Icon(Icons.qr_code,color: Colors.black,), )3.注意事项
一开始我是直接利用的文档提供的案例代码，厥后发现当扫完码返回的时间会出现标题，就是直接返回好几个页面，厥后在_onQRViewCreated中修改了下案例代码，就是在返回之前调用controller?.dispose()
void _onQRViewCreated(QRViewController controller) { controller.resumeCamera(); setState(() { this.controller = controller; }); controller.scannedDataStream.listen((scanData) { setState(() { result = scanData; //返回之前调用dispose() controller?.dispose(); Get.back(result: scanData?.code); }); }); }别的另有偶然候进入的时间页面是黑屏，必要点一下才气出现画面，这里我也调解了下，就是在_onQRViewCreated中到场controller.resumeCamera()激活一下相机
void _onQRViewCreated(QRViewController controller) { //激活相机，否则偶然候会黑屏 controller.resumeCamera(); setState(() { this.controller = controller; }); controller.scannedDataStream.listen((scanData) { setState(() { result = scanData; //返回之前调用dispose() controller?.dispose(); Get.back(result: scanData?.code); }); }); } |
