目录
实现效果
实现步骤
1.引入扫码依赖
这里使用的是qr_code_scanner
dependencies:
qr_code_scanner: ^1.0.1
2.添加代码
扫码页面的代码如下:
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);
});
});
}