如何让SwiftUI的fullScreenCover背景实现透明效果？

预期效果 #

当前效果 #

已尝试方案 #

1. 最初尝试将BuyWithPointsView嵌套在带.background(.gray.opacity(0.9))的VStack中，无效果。代码如下：

let width = UIScreen.main.bounds.width
.fullScreenCover(isPresented: $showCover) {
    BuyWithPointsView(type: type).frame(width: (width * (91.733 / 100)), height: (width * (66.667 / 100)))
}

2. 参考相关方案添加模糊背景后，未达到透视模糊效果，调整透明度和颜色无明显作用。代码如下：

.fullScreenCover(isPresented: $showCover) {
    ZStack {
        ZStack {
            Color.gray.opacity(0.1).edgesIgnoringSafeArea(.all)
        }.background(BackgroundBlurView())
        BuyWithPointsView(type: type).frame(width: (width * (91.733 / 100)), height: (width * (66.667 / 100)))
    }
}

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) {}
}

调整后得到的效果：

解决方案 #

要实现预期的半透明透视模糊背景，需移除fullScreenCover默认的不透明背景，并使用系统原生模糊效果：

步骤1：清除默认背景 #

创建工具视图移除fullScreenCover的默认背景：

struct TransparentBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

步骤2：构建带模糊背景的弹窗 #

在fullScreenCover中先添加全屏模糊层，再放置弹窗内容：

.fullScreenCover(isPresented: $showCover) {
    ZStack {
        // 全屏系统级模糊背景，可切换style调整模糊风格
        UIBlurEffect(style: .systemUltraThinMaterialLight)
            .ignoresSafeArea()
            .opacity(0.8) // 调整透明度控制模糊深浅
        
        // 弹窗内容
        BuyWithPointsView(type: type)
            .frame(width: UIScreen.main.bounds.width * 0.917, height: UIScreen.main.bounds.width * 0.667)
    }
    .background(TransparentBackgroundView()) // 清除默认不透明背景
}

关键说明 #

• 使用systemUltraThinMaterialLight这类系统材质模糊样式，能获得更自然的透视模糊效果，比单纯颜色透明度调整更贴近预期。
• TransparentBackgroundView是核心，必须通过它移除fullScreenCover默认的白色背景，否则模糊效果无法透出底层页面。

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