如何让SwiftUI自定义bottomSheet弹窗显示在TabView标签栏前方

我在使用SwiftUI的TabView时，想要自定义一个bottomSheet()修饰器，它支持传入视图，实现类似系统标准sheet()修饰器的效果，但不会占满全屏。
当前现象：已完成自定义修饰器的开发，可以正常弹出底部弹窗，但弹窗会显示在底部标签栏的后方（因为弹窗是从NavigationView内部渲染的）。
预期效果：希望找到方案让弹窗覆盖标签栏，显示在最前方。

最小复现代码 #

自定义修饰器实现 #

struct BottomSheet<SheetContent: View>: ViewModifier {
    
    let sheetContent: SheetContent
    
    @Binding var isPresented: Bool
    
    init(isPresented: Binding<Bool>, @ViewBuilder content: () -> SheetContent) {
        self.sheetContent = content()
        _isPresented = isPresented
    }
    
    func body(content: Content) -> some View {
        ZStack {
            content
            if isPresented {
                ZStack {
                    Color.black.opacity(0.1)
                    VStack {
                        Spacer()
                        sheetContent
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(
                                Rectangle()
                                    .foregroundColor(.white)
                            )
                    }
                }
            }
        }
    }
}

extension View {
    func bottomSheet<SheetContent: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> SheetContent) -> some View {
        self.modifier(BottomSheet(isPresented: isPresented, content: content))
    }
}

修饰器调用代码 #

struct ScheduleTab: View {
    
    @State private var showSheet = false
    
    var body: some View {
        NavigationView {
            Button("Open Sheet") {
                showSheet.toggle()
            }
        }
        .navigationTitle("Today")
        .navigationBarTitleDisplayMode(.inline)
        .bottomSheet(isPresented: $showSheet) {
            Text("Hello, World")
        }
    }
}

问题根源是你将bottomSheet修饰符挂载到了NavigationView上，而NavigationView是TabView的子视图，渲染层级低于Tab栏，因此弹窗会被Tab栏遮挡。可以通过以下两种方案解决：

方案1：将修饰符挂载到TabView层级（推荐，实现简单） #

把bottomSheet修饰符移到TabView所在的父视图，通过共享状态控制弹窗显隐，此时弹窗的渲染层级和Tab栏同级，自然覆盖Tab栏。
示例代码：

// 父视图，TabView的容器
struct MainTabContainer: View {
    // 共享的弹窗控制状态
    @State private var showGlobalSheet = false
    // 可使用枚举管理不同类型的弹窗内容，此处简化为AnyView
    @State private var sheetContent: AnyView?
    
    var body: some View {
        TabView {
            ScheduleTab(showSheet: $showGlobalSheet, sheetContent: $sheetContent)
                .tabItem {
                    Label("日程", systemImage: "calendar")
                }
            // 其他Tab页...
        }
        // 修饰符加在TabView上
        .bottomSheet(isPresented: $showGlobalSheet) {
            sheetContent
        }
    }
}

// 修改后的子Tab页
struct ScheduleTab: View {
    @Binding var showSheet: Bool
    @Binding var sheetContent: AnyView?
    
    var body: some View {
        NavigationView {
            Button("Open Sheet") {
                // 设置要展示的弹窗内容
                sheetContent = AnyView(Text("Hello, World"))
                showSheet.toggle()
            }
        }
        .navigationTitle("Today")
        .navigationBarTitleDisplayMode(.inline)
        // 此处不再添加bottomSheet修饰符
    }
}

方案2：将弹窗渲染到顶层Window（适合通用组件场景） #

如果你希望修饰器可以在任意子视图调用，都能全局置顶显示，可以通过UIKit获取当前应用的顶层Window，将弹窗视图直接添加到Window上，完全不受当前视图层级限制。

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