如何在 SwiftUI 中剪辑背景模糊

如何解决如何在 SwiftUI 中剪辑背景模糊

我想有一个半透明的模糊叠加视图，但模糊会产生模糊的边缘，我希望它能够清晰地勾勒出叠加形状，即剪裁它。

struct TestBlur : View {
    var body : some View {
        HStack {
            vstack {
                Spacer()
                Text("Hello World")
                Spacer()
            }
            .frame(width: 128)
            .background(Color.red.opacity(0.5).blur(radius: 16).clipShape(Rectangle()))
            Spacer()
        }
        .background(Color.yellow)
    }
}

我希望红色叠加层的边缘像这样：

本质上，我希望红色视图模糊其下方的任何内容并具有锐利的边缘：

使用@Asperi 的 BackgroundBlurView 也不起作用，没有完成模糊（也许我没有正确使用）：

    var body : some View {
        ZStack {
            vstack {
                ForEach(0..<40) { i in
                    Text("ABCDEFGHIKLMnopQRSTUVWXYZ ABCDEFGHIKLMnopQRSTUVWXYZ ABCDEFGHIKLMnopQRSTUVWXYZ ABCDEFGHIKLMnopQRSTUVWXYZ ABCDEFGHIKLMnopQRSTUVWXYZ ")
                }
                .rotationEffect(Angle.init(degrees: 0))
            }
            .opacity(0.9)
            .background(Color.yellow)
            
            HStack {
                // Trying to make the below vstack have a semi-transparent background and blur all content below it
                // but the vstack needs to have a sharp edge,not fuzzy.
                vstack {
                    Spacer()
                    Text("Hello World")
                    Spacer()
                }
                .frame(width: 128)
                .background(Color.red.opacity(0.5))
                .background(BackgroundBlurView().opacity(0.8))
                Spacer()
            }
        }
    }

struct BackgroundBlurView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        dispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }

    func updateUIView(_ uiView: UIView,context: Context) {}
}

看起来像这样（没有模糊）：