SwiftUI开发Mac应用：如何实现覆盖全窗口（含导航栏）的浮层/弹窗？

在Mac的SwiftUI中，NavigationSplitView或NavigationStack的导航栏属于NSWindow的标题栏附件层级，默认比普通SwiftUI视图层级更高，所以直接用ZStack、.overlay这类方法无法让浮层覆盖它。下面提供两种可行的解决思路：

方案一：隐藏系统导航栏，自定义导航栏 #

直接屏蔽系统自带的导航栏，自己实现导航栏组件，这样所有视图层级都在你的控制范围内，浮层自然能覆盖整个窗口。

修改你的代码如下：

import SwiftUI

@main
struct PopOverApp: App {
    @State private var isTopSnackbarPresented = false

    var body: some Scene {
        WindowGroup {
            ContentView()
                .overlay(
                    Rectangle()
                        .background(.blue)
                        .ignoresSafeArea()
                )
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } detail: {
            VStack(spacing: 0) {
                // 自定义导航栏
                HStack {
                    Button("返回") {}
                    Spacer()
                    Text("详情页")
                    Spacer()
                    Button("设置") {}
                }
                .padding()
                .background(.gray.opacity(0.2))
                
                Text("Detail")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        // 隐藏系统导航栏
        .toolbar(.hidden, for: .navigationBar)
        .toolbar(.hidden, for: .sidebar)
    }
}

方案二：将浮层添加到NSWindow的更高层级 #

通过AppKit API，把浮层视图直接添加到NSWindow的contentView的父视图上，绕过SwiftUI的层级限制。

实现步骤：

1. 创建一个用于托管浮层的NSViewRepresentable组件
2. 在App或主视图中嵌入该组件，管理浮层的显示

代码示例：

import SwiftUI
import AppKit

// 浮层托管组件
struct WindowOverlayHost: NSViewRepresentable {
    @Binding var isPresented: Bool
    
    func makeNSView(context: Context) -> NSView {
        let view = NSView()
        view.wantsLayer = true
        view.layer?.backgroundColor = NSColor.blue.cgColor
        view.isHidden = !isPresented
        // 添加到window的contentView父视图
        DispatchQueue.main.async {
            if let window = view.window, let contentSuperview = window.contentView?.superview {
                contentSuperview.addSubview(view)
                view.frame = contentSuperview.bounds
                view.autoresizingMask = [.width, .height]
            }
        }
        return view
    }
    
    func updateNSView(_ nsView: NSView, context: Context) {
        nsView.isHidden = !isPresented
    }
}

@main
struct PopOverApp: App {
    @State private var isTopSnackbarPresented = true

    var body: some Scene {
        WindowGroup {
            ZStack {
                ContentView()
                WindowOverlayHost(isPresented: $isTopSnackbarPresented)
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } detail: {
            Text("Detail")
        }
    }
}

这个方案的核心是利用AppKit的视图层级，将浮层直接挂载到窗口contentView的父视图，这个层级高于系统导航栏的标题栏附件，所以能实现覆盖效果。

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