SwiftUI：如何让background修饰符同时作用于Navigation工具栏

这个问题我之前也踩过坑！核心原因是NavigationView的工具栏（Toolbar）属于独立的视图层级，你原来把遮罩放在ZStack内部，只能覆盖主内容区域，根本碰不到工具栏那一层。想要让遮罩同时覆盖工具栏，得把遮罩和你的半屏菜单一起放到NavigationView的外面，作为它的overlay。

修改后的完整代码 #

struct EditProfileMenu: View {
    @State private var openProfilePictureAction: Bool = false // 控制半屏菜单的显示
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    Text("CHANGE PROFILE PICTURE")
                        .onTapGesture {
                            self.openProfilePictureAction = true
                        }
                }
                .toolbar(content: {
                    // 这里放你的保存、取消工具栏按钮
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {}
                    }
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button("Cancel") {}
                    }
                })
            }
        }
        // 关键：把遮罩和半屏菜单作为NavigationView的overlay
        .overlay(
            Group {
                if openProfilePictureAction {
                    Color.black.opacity(0.6)
                        .edgesIgnoringSafeArea(.all)
                        .onTapGesture {
                            openProfilePictureAction = false
                        }
                    
                    VStack {
                        Spacer()
                        HalfActionSheet()
                            .offset(y: openProfilePictureAction ? 0 : UIScreen.main.bounds.height)
                    }
                }
            }
        )
    }
}

关键改动说明 #

• 把原来的遮罩层（Color.black.opacity(0.6)）和半屏菜单（HalfActionSheet）从NavigationView内部的ZStack移到了NavigationView的overlay里，这样整个NavigationView（包括顶部的工具栏）都会被遮罩覆盖。
• 用Group和if openProfilePictureAction来控制遮罩和菜单的显示/隐藏，逻辑更清晰。
• 遮罩层单独处理点击事件，点击后关闭菜单，和原来的逻辑保持一致。

这样修改后，当你打开半屏菜单时，不仅主视图会变暗，顶部的工具栏也会被遮罩层覆盖，完美实现你想要的效果！

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