SwiftUI全屏覆盖层异常：如何让覆盖层完全覆盖工具栏？

我有两个SwiftUI视图：

SwiftUIView

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        NavigationStack {
            ... // 展示SwiftUIView2
        }
        .toolbar {
            ...
        }
        .overlay {
            ... // 全屏覆盖层
        }
    }
}

#Preview {
    SwiftUIView()
}

SwiftUIView2

import SwiftUI

struct SwiftUIView2: View {
    var body: some View {
        NavigationStack {
            ...
        }
        .toolbar {
            ...
        }
        .overlay {
            ... // 全屏覆盖层
        }
    }
}

#Preview {
    SwiftUIView()
}

第一个视图的overlay可以正常全屏覆盖，但第二个视图的overlay无法覆盖工具栏按钮。我尝试过多种方法都没成功，使用fullScreenCover(...)时存在动画异常、连续关闭-跳转等问题。

示例代码

struct OverlayView: ViewModifier {
    @Binding var isPresented: Bool
    let modalContent: AnyView

    func body(content: Content) -> some View {
        ZStack {
            content
            if isPresented {
                modalContent
                    .edgesIgnoringSafeArea(.all)
            }
        }
    }
}

extension View {
    func overlayModal(isPresented: Binding<Bool>, @ViewBuilder modalContent: () -> some View) -> some View {
        self.modifier(OverlayView(isPresented: isPresented, modalContent: AnyView(modalContent())))
    }
}

struct ContentView: View {
    @State var showModal = false
    @State var showNext = false
    
    var body: some View {
        NavigationStack {
            Button {
                showModal = true
                DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                    showModal = false
                    showNext = true
                }
            } label: {
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("Hello, world!")
                }
                .padding()
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    NavigationLink {
                        EmptyView()
                    } label: {
                        Rectangle()
                            .frame(width: 44, height: 44)
                    }
                }
            }
            .navigationDestination(isPresented: $showNext) {
                ContentView()
            }
        }
        .overlayModal(isPresented: $showModal) {
            Color.black.opacity(0.5)
        }
    }
}

问题根源在于嵌套的NavigationStack和视图层级关系：当通过navigationDestination跳转到新的ContentView时，新视图的NavigationStack会嵌套在父NavigationStack内部，此时新视图的overlayModal只作用于自身的NavigationStack，但父NavigationStack的工具栏层级更高，导致覆盖层无法覆盖它。

以下是两种可行的解决方式：

1. 统一使用根NavigationStack（推荐） #

不要在每个子视图中重复创建NavigationStack，只在根视图保留一个NavigationStack，所有子视图作为navigationDestination的内容。这样可以将覆盖层直接应用在根NavigationStack外部，确保覆盖整个界面（包括所有层级的工具栏）。

修改后的示例代码：

struct OverlayView: ViewModifier {
    @Binding var isPresented: Bool
    let modalContent: AnyView

    func body(content: Content) -> some View {
        ZStack {
            content
            if isPresented {
                modalContent
                    .edgesIgnoringSafeArea(.all)
                    .allowsHitTesting(true) // 确保覆盖层能拦截点击操作
            }
        }
    }
}

extension View {
    func overlayModal(isPresented: Binding<Bool>, @ViewBuilder modalContent: () -> some View) -> some View {
        self.modifier(OverlayView(isPresented: isPresented, modalContent: AnyView(modalContent())))
    }
}

// 根视图：仅保留一个NavigationStack
struct RootView: View {
    @State var showModal = false
    @State var showNextContentView = false
    
    var body: some View {
        NavigationStack {
            ContentView(showModal: $showModal, showNext: $showNextContentView)
                .navigationDestination(isPresented: $showNextContentView) {
                    ContentView(showModal: .constant(false), showNext: .constant(false))
                }
        }
        .overlayModal(isPresented: $showModal) {
            Color.black.opacity(0.5)
        }
    }
}

// 子视图：不再包含独立的NavigationStack
struct ContentView: View {
    @Binding var showModal: Bool
    @Binding var showNext: Bool
    
    var body: some View {
        Button {
            showModal = true
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                showModal = false
                showNext = true
            }
        } label: {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
        }
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                NavigationLink {
                    EmptyView()
                } label: {
                    Rectangle()
                        .frame(width: 44, height: 44)
                }
            }
        }
    }
}

#Preview {
    RootView()
}

2. 保留嵌套NavigationStack的场景 #

如果必须保留每个视图的独立NavigationStack，可以将覆盖层直接应用到Window层级，确保它在所有视图之上：

// 新增全局覆盖层的ViewModifier
struct GlobalOverlayView: ViewModifier {
    @Binding var isPresented: Bool
    let modalContent: AnyView
    
    func body(content: Content) -> some View {
        content
            .background {
                if let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) {
                    ZStack {
                        if isPresented {
                            modalContent
                                .edgesIgnoringSafeArea(.all)
                                .frame(width: window.frame.width, height: window.frame.height)
                                .allowsHitTesting(true)
                        }
                    }
                    .allowsHitTesting(false) // 不影响原视图的交互逻辑
                }
            }
    }
}

extension View {
    func globalOverlayModal(isPresented: Binding<Bool>, @ViewBuilder modalContent: () -> some View) -> some View {
        self.modifier(GlobalOverlayView(isPresented: isPresented, modalContent: AnyView(modalContent())))
    }
}

// 修改ContentView使用全局覆盖层
struct ContentView: View {
    @State var showModal = false
    @State var showNext = false
    
    var body: some View {
        NavigationStack {
            Button {
                showModal = true
                DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                    showModal = false
                    showNext = true
                }
            } label: {
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("Hello, world!")
                }
                .padding()
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    NavigationLink {
                        EmptyView()
                    } label: {
                        Rectangle()
                            .frame(width: 44, height: 44)
                    }
                }
            }
            .navigationDestination(isPresented: $showNext) {
                ContentView()
            }
        }
        .globalOverlayModal(isPresented: $showModal) {
            Color.black.opacity(0.5)
        }
    }
}

关键说明 #

• 避免嵌套NavigationStack：这是SwiftUI导航的最佳实践，能减少层级混乱和视图交互问题。
• 覆盖层的层级：确保覆盖层添加在足够高的层级（根NavigationStack外部或Window层级），才能覆盖所有界面元素包括工具栏。
• allowsHitTesting(true)：确保覆盖层能拦截用户点击，避免底层视图响应操作。

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