SwiftUI菜单显示时如何阻止其他视图的.onTapGesture触发？

问题说明 #

当前实现存在两个核心问题：

• Menu处于激活状态时，点击屏幕其他区域会触发对应视图的.onTapGesture
• 使用全屏遮罩拦截点击的方案中，若用户选择已选中的菜单项，Menu会消失，但Picker和Menu的.onDisappear回调均不触发，导致遮罩无法关闭

用户原代码：

/* triggers a full screen view on parent to be able to trap clicks anywhere on the screen and prevent other views .ontap from firing. 

This works when the use taps outside, when the user makes a change but does not work when the user selects the already selected menu item. In that case the menu does disappear but I can't toggle the parent's trapping view because .disappear for the menu or the picker doesn't actually fire.
*/
@Binding var menuShowing: Bool  

....

Menu {
      Picker("Topic", selection: $selectedTopic) {
        Text("Unassigned")
        .tag(nil as Topic?)
        
        Divider()
        
        ForEach(topics, id:\.id) { topic in
            Text(topic.name!)
            .tag(topic as Topic?)
         }
      }
      .onDisappear{
          print("Picker Disappeared") // THIS DOES NOT FIRE IF THE USER SELECTS THE ALREADY SELECTED ITEM
      }
     }
 label: {
         Image(systemName: "circle.grid.3x3.circle")
         .font(.system(size: 26,weight: .ultraLight))
         .foregroundColor(learningSet.topic?.foregroundColor ?? .primary)
         .frame(width:30, height: 30)
        }
        .contentShape(Rectangle())
        .onDisappear{ // THIS DOES NOT FIRE IF THE USER SELECTS THE ALREADY SELECTED ITEM
            print("Menu Disappeared")
        }        
        .onTapGesture {
             vm.haptic()
             menuShowing.toggle()
         }

        .onChange(of: selectedTopic, perform: { _ in
            menuShowing = false
            DispatchQueue.main.async {
                if learningSet.topic != selectedTopic{
                    
                    learningSet.lastModifiedOn = .now
                    learningSet.topic?.lastModifiedOn = .now
                    
                    learningSet.topic = selectedTopic
                    if selectedTopic == nil{
                        vm.unassignedExpanded = true
                    } else{
                        selectedTopic?.lastModifiedOn = .now
                        selectedTopic?.expanded = true
                    }
                    _ = vm.save("Changed Topic for set \(learningSet.name ?? "..") to \(String(describing: selectedTopic?.name))")
                    withAnimation(.easeInOut(duration: 0.15)){
                        forceRefresh.toggle()
                    }
                }
            }
        })

解决方案 #

核心思路 #

放弃不可靠的.onDisappear回调，改用以下两种方式确保遮罩能正确关闭：

1. 给Picker的每个选项添加点击手势，强制关闭遮罩状态
2. 用全屏透明遮罩拦截外部点击，同时控制遮罩的显示/隐藏

修改后的代码 #

父视图添加全屏遮罩

在父视图的ZStack中添加透明遮罩，确保Menu激活时拦截所有外部点击：

ZStack {
    // 原有页面内容
    
    // 全屏透明遮罩：仅在Menu激活时显示
    if menuShowing {
        Color.clear
            .contentShape(Rectangle()) // 确保整个屏幕都能响应点击
            .onTapGesture {
                menuShowing = false // 点击遮罩关闭Menu状态
            }
            .zIndex(1) // 确保遮罩在所有内容之上
    }
}

修改Menu组件代码

给Picker的每个选项添加点击手势，同时移除无用的.onDisappear回调：

@Binding var menuShowing: Bool
@Binding var selectedTopic: Topic?
let learningSet: LearningSet
let vm: ViewModel
let topics: [Topic]
@State private var forceRefresh = false // 假设forceRefresh是本地状态

var body: some View {
    Menu {
        Picker("Topic", selection: $selectedTopic) {
            Text("Unassigned")
                .tag(nil as Topic?)
                .onTapGesture {
                    menuShowing = false // 点击选项立即关闭遮罩
                }
            
            Divider()
            
            ForEach(topics, id:\.id) { topic in
                Text(topic.name!)
                    .tag(topic as Topic?)
                    .onTapGesture {
                        menuShowing = false // 每个选项都添加关闭逻辑
                    }
            }
        }
    } label: {
        Image(systemName: "circle.grid.3x3.circle")
            .font(.system(size: 26,weight: .ultraLight))
            .foregroundColor(learningSet.topic?.foregroundColor ?? .primary)
            .frame(width:30, height: 30)
    }
    .contentShape(Rectangle())
    .onTapGesture {
        vm.haptic()
        menuShowing.toggle()
    }
    .onChange(of: selectedTopic, perform: { newValue in
        DispatchQueue.main.async {
            guard learningSet.topic != newValue else { return }
            
            learningSet.lastModifiedOn = .now
            learningSet.topic?.lastModifiedOn = .now
            
            learningSet.topic = newValue
            
            if newValue == nil {
                vm.unassignedExpanded = true
            } else {
                newValue?.lastModifiedOn = .now
                newValue?.expanded = true
            }
            
            _ = vm.save("Changed Topic for set \(learningSet.name ?? "..") to \(String(describing: newValue?.name))")
            
            withAnimation(.easeInOut(duration: 0.15)) {
                forceRefresh.toggle()
            }
        }
    })
}

方案说明 #

• 全屏遮罩：通过Color.clear覆盖在所有内容之上，拦截外部点击，避免其他视图的.onTapGesture被触发；点击遮罩时同步关闭menuShowing状态，Menu会自动消失。
• 选项点击手势：给每个Picker选项添加.onTapGesture，无论是否为已选中项目，点击后都会立即关闭menuShowing，解决了选中已选项时遮罩无法关闭的问题。
• 移除.onDisappear：SwiftUI的Menu和Picker组件在选中已选项时不会触发.onDisappear，这是框架的固有行为，因此直接移除这些不可靠的回调。

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