如何自定义iOS 13+下CodeScanner的二维码扫描视图？

要实现框外#363436、25%透明度遮罩，同时框内无遮挡的扫描视图，核心是创建全屏半透明图层并挖去中间扫描框区域，而非直接叠加纯色图层。以下是修改后的完整代码：

ZStack {
    // 全屏相机扫描视图（最底层）
    CodeScannerView(
        codeTypes: [.qr],
        completion: { result in
            if case let .success(code) = result {
                self.scandescription = code.string
                
                if let range = code.string.range(of: "-"), let deviceID = Int(code.string[range.upperBound...]) {
                    if let device = peripherals.getDeviceFromDeviceID(id: deviceID) {
                        connectToDvice(device: device)
                    }
                } else {
                    print("This device doesn't seems to be in scanned list")
                }
                
                self.isPresentingScanner = false
                self.homeViewModel.isNavigationVisible = true
            }
        }
    )
    .frame(width: mainWidth, height: mainHeight)
    .edgesIgnoringSafeArea(.all)
    
    // 框外半透明遮罩：全屏底色挖去中间扫描框
    Color(hex: "#363436").opacity(0.25)
        .mask(
            ZStack {
                Rectangle() // 全屏基础矩形
                RoundedRectangle(cornerRadius: 25) // 中间扫描框形状
                    .frame(width: mainWidth - 72, height: mainHeight - mainHeight / 1.7)
                    .blendMode(.destinationOut) // 挖去中间区域
            }
            .compositingGroup() // 确保混合模式仅作用于当前组内元素
        )
    
    // 黄色扫描框边框（最上层）
    RoundedRectangle(cornerRadius: 25)
        .stroke(Color.yellow, lineWidth: 5)
        .frame(width: mainWidth - 72, height: mainHeight - mainHeight / 1.7)
}

关键说明： #

• 遮罩逻辑：通过mask结合blendMode(.destinationOut)，在全屏半透明颜色上挖去中间扫描框区域，仅保留框外的遮罩效果，框内自然透出底层相机视图。
• 层级控制：相机视图在最底层，遮罩层居中，黄色边框在最上层，确保视觉层级正确。
• compositingGroup：必须添加该修饰符，限制混合模式的作用范围，避免影响下层的相机视图显示。

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