SwiftUI中添加Rectangle后如何覆盖ToolbarItem？

要让点击按钮后出现的Rectangle覆盖包括Toolbar在内的所有界面元素，核心是调整视图层级，让覆盖层处于NavigationView的上层。下面是具体实现方案：

方案一：用ZStack包裹NavigationView和覆盖层 #

通过在外层添加ZStack，将覆盖层直接放在NavigationView的上方，确保其层级更高：

struct ContentView: View {
    @State private var isShowingOverlay = false // 控制覆盖层的显示状态
    
    var body: some View {
        ZStack {
            // 原有的NavigationView结构
            NavigationView {
                ZStack {
                    Text("content")
                        .toolbar {
                            ToolbarItem(placement: .topBarTrailing) {
                                Button {
                                    isShowingOverlay.toggle() // 点击按钮切换覆盖层显示
                                } label: {
                                    Text("item")
                                }
                            }
                        }
                        .buttonStyle(PlainButtonStyle())

                    Rectangle()
                        .fill(Color.red)
                        .frame(width: 400, height: 800)
                        .ignoresSafeArea()
                        .onTapGesture {
                            // push to another view
                        }
                }
            }
            
            // 覆盖层：处于NavigationView上层，可覆盖所有元素
            if isShowingOverlay {
                Rectangle()
                    .fill(Color.blue.opacity(0.8)) // 半透明方便观察效果，可自行修改颜色
                    .ignoresSafeArea()
                    .onTapGesture {
                        isShowingOverlay.toggle() // 点击覆盖层关闭
                    }
            }
        }
    }
}

方案二：使用NavigationView的overlay修饰符 #

也可以直接给NavigationView添加overlay修饰符，将覆盖层附加在NavigationView之上：

struct ContentView: View {
    @State private var isShowingOverlay = false
    
    var body: some View {
        NavigationView {
            ZStack {
                Text("content")
                    .toolbar {
                        ToolbarItem(placement: .topBarTrailing) {
                            Button {
                                isShowingOverlay.toggle()
                            } label: {
                                Text("item")
                            }
                        }
                    }
                    .buttonStyle(PlainButtonStyle())

                Rectangle()
                    .fill(Color.red)
                    .frame(width: 400, height: 800)
                    .ignoresSafeArea()
                    .onTapGesture {
                        // push to another view
                    }
            }
        }
        .overlay(
            isShowingOverlay ? 
                Rectangle()
                    .fill(Color.blue.opacity(0.8))
                    .ignoresSafeArea()
                    .onTapGesture { isShowingOverlay.toggle() }
                : nil
        )
    }
}

原理说明 #

Toolbar是NavigationView内部的顶级视图之一，原代码中的所有内容都处于NavigationView的content层级中，无法覆盖Toolbar。将覆盖层放在NavigationView的外部（或通过overlay附加在其上层），就能让覆盖层的渲染层级高于NavigationView的所有内部元素，从而实现全屏覆盖的效果。

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