我设法添加了我想要的效果,但它只在 Android 设备上有效,在 IOS 上,模糊效果是在整个屏幕上。我的代码和打印:Page:class HomePayQrcodePage extends StatelessWidget {
我设法添加了我想要的效果,但它只在 Android 设备上有效,在 IOS 上,模糊效果是在整个屏幕上。我的代码和打印:
页:
class HomePayQrcodePage extends StatelessWidget {
const HomePayQrcodePage({required this.controller, super.key});
final HomePayQrcodeController controller;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.transparentWhite,
body: \_body(context),
);
}
Widget \_body(BuildContext context) {
const cutOutSize = 260.0;
const borderRadius = 20.0;
return SafeArea(
child: Stack(
children: [
QRView(
key: GlobalKey(debugLabel: 'HomePayPage'),
onQRViewCreated: controller.onQRViewCreated,
),
Positioned.fill(
child: ClipPath(
clipper: HoleClipper(
cutOutSize: cutOutSize,
borderRadius: borderRadius,
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
child: Container(
color: Colors.black54.withOpacity(0.3),
),
),
),
),
Positioned(
top: 10,
left: 10,
child: AppBackButton(onTap: controller.onClickBack),
),
],
),
);
}
}
class HoleClipper extends CustomClipper\<Path\> {
final double cutOutSize;
final double borderRadius;
HoleClipper({required this.cutOutSize, required this.borderRadius});
@override
Path getClip(Size size) {
final cutOutRect = RRect.fromRectAndRadius(
Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: cutOutSize,
height: cutOutSize,
),
Radius.circular(borderRadius),
);
final path = Path()
..addRect(Rect.fromLTWH(0, 0, size.width, size.height))
..addRRect(cutOutRect)
..fillType = PathFillType.evenOdd;
return path;
}
@override
bool shouldReclip(CustomClipper\<Path\> oldClipper) =\> false;
}
控制器
class HomePayQrcodeController extends GetxController {
QRViewController? tQrViewController;
RxInt cardsListIndex = (Get.arguments\[0\] as int).obs;
@override
void dispose() {
super.dispose();
tQrViewController?.dispose();
}
Future\<void\> onQRViewCreated(QRViewController controller) async {
tQrViewController = controller;
controller.scannedDataStream.listen(
(scanData) async {
if (Platform.isAndroid) {
controller.pauseCamera();
} else if (Platform.isIOS) {
controller.resumeCamera();
}
String scanned = scanData.code as String;
log('QR Code Scanned: $scanned');
Get.back(result: scanned);
},
);
}
void onClickBack() {
Get.back(result: 'back');
}
Future\<void\> underConstruction() async {
await Get.toNamed(NamedRoutes.underConstruction);
}
}
Android 正常工作:
有问题的IOS:
由于 QRView 自己的 QrScannerOverlayShape 不支持模糊效果,我尝试添加一个堆栈,其中第一个摄像头是 QRView,第二个摄像头是 ClipPath,以在屏幕上制作中央切口