SwiftUI自定义.sheet修饰符：需绑定至应用顶层窗口而非视图

你当前的实现使用.overlay将Sheet附加到当前视图上，导致Sheet仅在该视图范围内显示。要实现像原生.sheet那样全局覆盖的效果，需要将Sheet挂载到根窗口层级，而非当前视图的子层级。

解决方案 #

通过全局状态管理器控制Sheet的显示，将Sheet容器添加到App的根视图上，无论在哪个视图调用修饰符，最终都是触发全局Sheet的显示。

步骤1：创建全局Sheet管理器

import SwiftUI

class MobileSheetManager: ObservableObject {
    static let shared = MobileSheetManager()
    private init() {}
    
    // 控制Sheet显示状态
    @Published var isPresented = false
    // 存储Sheet内容
    private var content: () -> AnyView = { AnyView(EmptyView()) }
    
    // 显示Sheet的方法
    func show<Content: View>(@ViewBuilder content: @escaping () -> Content) {
        self.content = { AnyView(content()) }
        isPresented = true
    }
    
    // 关闭Sheet的方法
    func dismiss() {
        isPresented = false
    }
    
    // 获取当前Sheet内容
    func getContent() -> AnyView {
        content()
    }
}

步骤2：在App根视图添加全局Sheet容器

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            MenuView()
                // 添加全局Sheet容器，始终在根视图层级
                .overlay {
                    if MobileSheetManager.shared.isPresented {
                        MobileSheet(isPresented: $MobileSheetManager.shared.isPresented) {
                            MobileSheetManager.shared.getContent()
                        }
                        .ignoresSafeArea() // 确保覆盖整个屏幕
                    }
                }
        }
    }
}

步骤3：实现自定义Sheet视图（确保全屏覆盖）

struct MobileSheet<Content: View>: View {
    @Binding var isPresented: Bool
    let content: () -> Content
    
    var body: some View {
        ZStack {
            // 全屏半透明背景
            Color.black.opacity(0.5)
                .ignoresSafeArea()
                .onTapGesture {
                    isPresented = false
                }
            
            // 居中显示的内容视图（可根据需求调整布局）
            content()
                .padding()
                .background(Color.white)
                .cornerRadius(16)
                .padding(.horizontal)
        }
        .transition(.opacity.combined(with: .scale))
        .animation(.easeInOut(duration: 0.3), value: isPresented)
    }
}

步骤4：修改自定义修饰符，绑定全局管理器

extension View {
    func mobileSheetPresenter<InnerContent: View>(_ isSheetPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> InnerContent) -> some View {
        self
            // 监听外部绑定的状态变化，同步到全局管理器
            .onChange(of: isSheetPresented.wrappedValue) { newValue in
                let manager = MobileSheetManager.shared
                if newValue {
                    manager.show(content: content)
                } else {
                    manager.dismiss()
                }
            }
            // 监听全局管理器的状态变化，同步回外部绑定
            .onReceive(MobileSheetManager.shared.$isPresented) { presented in
                if isSheetPresented.wrappedValue != presented {
                    isSheetPresented.wrappedValue = presented
                }
            }
    }
}

使用示例（原有代码无需修改结构） #

struct MenuView: View {
    @State private var isSheetPresented = false
    
    var body: some View {
        VStack {
            VStack { // Yellow View
                Button("Show Mobile Sheet") {
                    isSheetPresented.toggle()
                }
                .mobileSheetPresenter($isSheetPresented) {
                    Text("Hello, MobileSheet! with some long text")
                }
            }
            .frame(width: 300, height: 200)
            .background(.yellow)
            
            VStack { // Red view
                Text("Some Text")
            }
            .frame(width: 300, height: 200)
            .background(.red)
        }
    }
}

原理说明 #

• 全局MobileSheetManager负责存储Sheet的显示状态和内容，所有视图通过它统一控制Sheet。
• 根视图的.overlay始终监听管理器的状态，一旦触发就显示全屏覆盖的Sheet。
• 自定义修饰符仅负责同步外部绑定与全局管理器的状态，不再将Sheet附加到当前视图，从而实现全局覆盖效果。

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