SwiftUI中如何在视图上方显示黑色半透明视图？

问题根源 #

你使用fullScreenCover展示视图时，它默认自带不透明背景层，会完全遮挡下方内容；直接给黑色矩形加opacity无效，核心原因就是这个系统默认背景在起作用。

两种可行解决方案 #

方案一：用Overlay替代FullScreenCover（推荐）

Overlay是直接叠在当前视图上层的容器，天然适合做半透明覆盖效果，无需额外修改系统默认背景。

主视图代码示例：

buttonActionView()
    .overlay {
        if isPresenting {
            ZStack {
                // 半透明黑色背景，点击可关闭
                Color.black.opacity(0.5)
                    .ignoresSafeArea()
                    .onTapGesture {
                        isPresenting = false
                    }
                // 你的滚动内容视图
                VZScrollViewIfNeeded {
                    VStack(alignment: .leading) {
                        // 这里放你的内容代码
                    }
                }
            }
            .transition(.opacity) // 添加淡入淡出过渡动画
        }
    }

方案二：修改FullScreenCover的默认背景

如果必须使用fullScreenCover，需要先将它的系统默认背景改为透明，再给黑色背景添加透明度：

第一步，定义你的透明视图：

struct TransparentView: View {
    var body: some View {
        ZStack {
            Color.black.opacity(0.5)
                .ignoresSafeArea()
            VZScrollViewIfNeeded {
                VStack(alignment: .leading) {
                    // 这里放你的内容代码
                }
            }
        }
        .background(Color.clear) // 确保视图本身背景透明
    }
}

第二步，修改fullScreenCover的调用逻辑：

buttonActionView()
    .fullScreenCover(isPresented: $isPresenting) {
        TransparentView()
            .onAppear {
                // 将窗口背景设为透明，让下层内容可见
                UIApplication.shared.windows.first?.backgroundColor = .clear
            }
            .onDisappear {
                // 恢复窗口默认背景
                UIApplication.shared.windows.first?.backgroundColor = .systemBackground
            }
    }

注意事项 #

• 方案一的overlay更轻量，无需操作UIKit窗口，兼容性更好。
• 方案二中，UIApplication.shared.windows适配iOS 13+，iOS 15+也可通过UIApplication.shared.connectedScenes获取窗口。

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