SwiftUI中如何在含Sheet的所有视图上层显示Overlay？

问题原因 #

你当前的错误Overlay是附加在NavigationStack层级上的，而Sheet属于独立的模态视图层级，渲染优先级高于WindowGroup内的常规视图，因此Overlay会被Sheet完全遮挡。

简便解决方案 #

不需要复杂的Window Scene或自定义UIHostingController配置，直接通过UIKit窗口层级挂载SwiftUI的错误Overlay，就能让它覆盖所有视图（包括Sheet）。以下是完整实现步骤：

1. 全局错误状态管理类

创建一个可观察的状态管理类，统一处理错误的显示与隐藏：

class ErrorManager: ObservableObject {
    @Published var errorWrapper: ErrorWrapper?
    
    func showError(error: Error, guidance: String) {
        errorWrapper = ErrorWrapper(error: error, guidance: guidance)
        // 可选：3秒后自动隐藏错误提示
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.errorWrapper = nil
        }
    }
}

2. 在App入口注入环境并挂载全局Overlay

修改App入口代码，初始化错误管理类并将Overlay添加到应用的主窗口：

@main
struct LearnApp: App {
    @StateObject private var errorManager = ErrorManager()
    
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
            }
            .environmentObject(errorManager)
            .environment(\.showError, ShowErrorAction(action: errorManager.showError))
            .onAppear {
                addGlobalErrorOverlay()
            }
        }
    }
    
    private func addGlobalErrorOverlay() {
        guard let window = UIApplication.shared.connectedScenes
                .compactMap({ $0 as? UIWindowScene })
                .first?.windows
                .first(where: { $0.isKeyWindow }) else { return }
        
        let errorOverlayView = ErrorOverlayView()
            .environmentObject(errorManager)
        
        let hostingController = UIHostingController(rootView: errorOverlayView)
        hostingController.view.backgroundColor = .clear
        hostingController.view.frame = window.bounds
        hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        window.addSubview(hostingController.view)
        window.rootViewController?.addChild(hostingController)
        hostingController.didMove(toParent: window.rootViewController)
    }
}

3. 实现错误Overlay视图

编写独立的Overlay视图，处理错误提示的UI与动画：

struct ErrorOverlayView: View {
    @EnvironmentObject private var errorManager: ErrorManager
    
    var body: some View {
        ZStack {
            Color.clear // 透明背景，不拦截下层视图交互
            
            if let errorWrapper = errorManager.errorWrapper {
                Text(errorWrapper.error.localizedDescription)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 12)
                    .background(Color.red.opacity(0.8))
                    .foregroundColor(.white)
                    .cornerRadius(8)
                    .padding(.bottom, 20)
                    .transition(.move(edge: .bottom))
                    .animation(.easeInOut(duration: 0.3), value: errorManager.errorWrapper)
            }
        }
        .ignoresSafeArea()
        .zIndex(.infinity)
    }
}

4. 补充必要的定义（如环境键、错误类型）

确保你已定义以下辅助类型：

// 自定义错误触发的环境动作
struct ShowErrorAction {
    let action: (Error, String) -> Void
    
    func callAsFunction(_ error: Error, _ guidance: String) {
        action(error, guidance)
    }
}

// 环境键定义
extension EnvironmentValues {
    var showError: ShowErrorAction {
        get { self[ShowErrorKey.self] }
        set { self[ShowErrorKey.self] = newValue }
    }
}

private struct ShowErrorKey: EnvironmentKey {
    static let defaultValue: ShowErrorAction = { _, _ in }
}

// 错误包装结构体
struct ErrorWrapper: Identifiable {
    let id = UUID()
    let error: Error
    let guidance: String
}

// 示例错误类型
enum SampleError: Error {
    case operationFailed
}

extension SampleError: LocalizedError {
    var localizedDescription: String {
        switch self {
        case .operationFailed:
            return "操作失败，请重试"
        }
    }
}

5. 测试视图（含Sheet场景）

修改ContentView添加Sheet测试按钮：

struct ContentView: View {
    @State private var isPresented: Bool = false
    @Environment(\.showError) private var showError
    
    var body: some View {
        VStack(spacing: 20) {
            Button("抛出错误（普通视图）") {
                showError(SampleError.operationFailed, "操作执行失败")
            }
            
            Button("弹出Sheet") {
                isPresented = true
            }
            .sheet(isPresented: $isPresented) {
                VStack {
                    Button("在Sheet里抛错") {
                        showError(SampleError.operationFailed, "Sheet内操作失败")
                    }
                }
                .padding()
            }
        }
        .padding()
    }
}

方案说明 #

• 该方案通过将SwiftUI视图直接添加到应用的主窗口层级，确保错误Overlay的渲染优先级高于所有模态视图（包括Sheet）。
• 保持了SwiftUI的状态管理与环境注入机制，无需手动处理复杂的窗口场景配置。
• 可选添加自动隐藏逻辑，提升用户体验。

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