我设法添加了我想要的效果，但它只在 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，以在屏幕上制作中央切口

• blur