SwiftUI Menu弹出时如何禁用背景交互？

问题场景 #

在iOS 17真机上，嵌套在ScrollView子视图中的SwiftUI Menu弹出后，背景区域仍能响应用户交互。例如当SubView2中存在触发Sheet的按钮时，点击该按钮会出现异常：绑定的isPresented变量被设为true，但Sheet无法正常弹出。传统的父视图叠加层+绑定/环境变量的实现方式过于繁琐，尤其当Menu层级较深或多处存在时。

简洁解决方案 #

利用SwiftUI的menuPresentationMode环境变量，创建一个通用的ViewModifier，自动在Menu弹出时禁用父视图的交互能力，无需手动传递状态绑定。

实现代码 #

1. 定义自定义ViewModifier及View扩展：

import SwiftUI

struct DisableBackgroundWhenMenuPresented: ViewModifier {
    @Environment(\.menuPresentationMode) private var menuPresentationMode
    
    func body(content: Content) -> some View {
        content
            .allowsHitTesting(!menuPresentationMode.wrappedValue.isPresented)
    }
}

extension View {
    func disableBackgroundWhenMenuPresented() -> some View {
        modifier(DisableBackgroundWhenMenuPresented())
    }
}

2. 给包含Menu的父视图（如ScrollView）添加该修饰符：

ScrollView {
    SubView1()
    SubView2()
    SubView3()
}
.disableBackgroundWhenMenuPresented()

原理说明 #

• menuPresentationMode是SwiftUI提供的环境变量，用于跟踪当前层级中Menu的弹出状态。
• 通过allowsHitTesting(!menuPresentationMode.wrappedValue.isPresented)，当Menu弹出时（isPresented为true），父视图会禁用所有点击交互，避免背景中的按钮被误触发；当Menu关闭后，交互自动恢复。

这个方案无需修改Menu内部代码，也不需要手动维护状态绑定，只需在需要禁用背景交互的父视图上添加一行代码即可，适配多层级或多处Menu的场景。

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