SwiftUI中如何让视图显示在包括sheet在内的所有视图之上

问题背景 #

尝试用SwiftUI的overlay实现类似原生Sheet的自定义弹窗，但原生Sheet/FullScreenCover会显示在主视图的overlay之上，无法达到自定义弹窗置顶的效果。需要让自定义Overlay能像原生Sheet一样，显示在所有视图层级的最上方，且兼容iOS 15及以上版本。

核心原因 #

SwiftUI的overlay是依附于当前视图的层级结构中的，而原生Sheet和FullScreenCover是通过独立的、层级更高的UIWindow（UIWindow.Level.alert级别）展示的，因此主视图的overlay会被这些原生弹窗覆盖。

解决方案：基于UIWindow的顶层视图实现 #

通过创建一个独立的UIWindow，将自定义弹窗内容放入其中，并设置该窗口的层级高于原生Sheet的层级，就能实现置顶显示。以下是完整实现代码：

1. 顶层Overlay容器实现 #

import SwiftUI

struct TopLevelOverlay<Content: View>: UIViewControllerRepresentable {
    let content: () -> Content
    @Binding var isPresented: Bool
    
    func makeUIViewController(context: Context) -> UIViewController {
        let vc = UIViewController()
        vc.view.backgroundColor = .clear
        return vc
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        if isPresented {
            guard let windowScene = UIApplication.shared.connectedScenes
                .first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene else {
                return
            }
            // 创建顶层窗口
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: content())
            window.backgroundColor = .clear
            // 设置窗口层级高于原生Sheet（alert层级是原生Sheet的层级，+1确保置顶）
            window.windowLevel = .alert + 1
            window.isHidden = false
            context.coordinator.window = window
        } else {
            // 隐藏并释放窗口，避免内存泄漏
            context.coordinator.window?.isHidden = true
            context.coordinator.window = nil
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator {
        var window: UIWindow?
    }
}

// 封装为View扩展，简化调用
extension View {
    func topLevelOverlay<Content: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> Content) -> some View {
        self.background(TopLevelOverlay(content: content, isPresented: isPresented))
    }
}

2. 使用示例 #

struct MainView: View {
    @State private var showCustomTopOverlay = false
    @State private var showNativeSheet = false
    
    var body: some View {
        VStack(spacing: 20) {
            Button("显示自定义置顶弹窗") {
                showCustomTopOverlay = true
            }
            Button("显示原生Sheet") {
                showNativeSheet = true
            }
        }
        .sheet(isPresented: $showNativeSheet) {
            Text("原生Sheet内容")
                .padding()
        }
        // 使用自定义顶层Overlay替代原overlay
        .topLevelOverlay(isPresented: $showCustomTopOverlay) {
            CustomSheet(content: Text("我能覆盖在原生Sheet之上"))
        }
    }
}

// 自定义Sheet示例视图
struct CustomSheet<Content: View>: View {
    let content: Content
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        ZStack {
            // 半透明背景，点击可关闭
            Color.black.opacity(0.3)
                .ignoresSafeArea()
                .onTapGesture {
                    dismiss()
                }
            // 弹窗内容区域
            content
                .padding()
                .background(Color.white)
                .cornerRadius(16)
                .padding(.horizontal, 20)
        }
    }
}

关键说明 #

• 窗口层级设置：将自定义窗口的windowLevel设为.alert + 1，确保其层级高于原生Sheet（使用.alert层级）和FullScreenCover。
• 场景适配：获取当前激活的UIWindowScene，适配多场景（如iPad分屏、多窗口）的情况。
• 生命周期管理：在isPresented变为false时，隐藏并释放窗口，避免内存泄漏。

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