SwiftUI：如何在不同View层级中设置zIndex实现指定交互？

要解决你的问题，需要同时实现两个核心需求：让遮罩层D覆盖全屏，保证菜单B能在D上方正常响应点击，同时A和B保持上下布局。

关键修改点 #

1. 让遮罩D覆盖全屏：给Color.red添加.ignoresSafeArea()修饰符，使其延伸到屏幕安全区外，实现全屏覆盖。
2. 调整层级确保B在D上方：在包含A和B的VStack（C）上设置.zIndex(1)，给遮罩D设置.zIndex(0)。ZStack的子视图层级由zIndex决定，数值越大层级越高，这样VStack整体会显示在D上方，B内的按钮就能正常响应点击。
3. 优化菜单B布局：给代表B的Rectangle添加固定高度（比如.frame(height: 150)），避免其默认撑满剩余空间，更符合菜单样式。

修改后的完整代码 #

struct Test: View {
    @State private var isMenuVisible = false
    
    var body: some View {
        ZStack {
            VStack { // C
                Button(action: { // A
                    isMenuVisible.toggle()
                }, label: {
                    Text("Open Menu")
                })
                
                if isMenuVisible {
                    Rectangle() // B
                        .fill(Color.blue)
                        .frame(height: 150) // 给菜单设置固定高度
                        .overlay {
                            Button(action: {
                                print("is clickable!")
                            }, label: {
                                Text("Menu-Button")
                            })
                        }
                }
                
                Spacer()
            }
            .zIndex(1) // 让包含A、B的VStack层级高于遮罩D
            
            if isMenuVisible {
                Color.red // D
                    .opacity(0.6)
                    .ignoresSafeArea() // 覆盖整个屏幕（包括安全区）
                    .onTapGesture {
                        isMenuVisible.toggle()
                    }
                    .zIndex(0) // 遮罩层级低于VStack
            }
        }
    }
}

效果说明 #

• 点击A按钮（Open Menu）会显示菜单B和全屏遮罩D
• 菜单B内的按钮可以正常点击，控制台会输出is clickable!
• 点击遮罩D的任何区域（除B的范围），都会关闭菜单B
• A和B保持原本的上下布局关系

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