检测 GeometryReader SwiftUI 背景上的点击手势

Question

我有一个主视图，并且在该视图中，我有一个位于 GeometryReader 内的小弹出菜单，如下所示：

        if (self.show){
                GeometryReader{_ in
                    Menu()
                }.background(Color.black.opacity(0.65))
        }

行 ~~~.background(Color.black.opacity(0.65))~~~ 本质上是使背景（即弹出视图中 不是 的视图的每个部分，有点暗。我想做这样的事情：

        if (self.show){
                GeometryReader{_ in
                    Menu()
                }.background(Color.black.opacity(0.65))
                    .background(.onTapGesture{
                        print("asdf")
                        })
        }

但不支持此语法。我有什么办法可以做到这一点吗？本质上，我想要它，以便当我在 GeometryReader 外部单击时，我可以切换变量（在这种情况下，摆脱弹出视图）。

我尝试在主视图上制作 TapGesture 识别器，但由于 GeometryReader 是主视图的一部分，当我点击 GeometryReader 弹出视图本身时，它就会消失。

有什么办法可以完成与我上面写的代码类似的事情吗？

谢谢

Answer 1

这是一个例子。我使用三个点击手势：

• 主视图上的一个用于切换“菜单”
• “菜单”上的一个（在那里做某事）
• 背景视图上的一个可以再次关闭“菜单”， 像这样：

    struct ContentView: View {
        
        @State private var showMenu: Bool = false
        
        var body: some View {
            ZStack {
                
                // The Main View.
                Text("Tap Me!")
                    .padding()
                    .onTapGesture {
                        showMenu.toggle()
                        print("Tapped Main View")
                    }
                
                // The Menu View (shown on top of the Main View).
                if showMenu {
                    GeometryReader { _ in
                        Text("Menu")
                            .padding()
                            .onTapGesture {
                                // do something here
                                print("Tapped Menu")
                            }
                    }
                    
                    // The Background View that darkens the whole screen.
                    .background(
                        Color.gray.opacity(0.2)
                            .edgesIgnoringSafeArea(.all)
                    )
                    .onTapGesture {
                        showMenu.toggle()
                        print("Tapped Background")
                    }
                }
            }
        }
    }

点击“点击我！” （主视图）调出菜单视图。 “菜单”捕获要执行操作的点击 - 在那里做任何你想做的事情。

每当用户点击“菜单”之外的地方时，背景上的点击手势就会识别该点击并关闭“菜单”，包括变暗的背景 --> 主视图再次变亮。

Answer 2

另一种可能的方法是在背景上添加 onTapGesture 修饰符。

GeometryReader { geometry in
    // YOUR VIEWS
}
.background(content: {
    Color.black.opacity(0.2)
        .onTapGesture {
            shouldShow.toggle()
        }
})