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

Posted 2023-02-24

【中文标题】检测 GeometryReader SwiftUI 背景上的点击手势

【英文标题】：Detecting tap gesture on the background of a GeometryReader SwiftUI

【发布时间】：2020-06-26 23:04:32

【问题描述】：

我有一个主视图，并且在该视图中我有一个位于 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 弹出视图本身时，它就会消失。

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

谢谢

【参考方案1】：

这是一个例子。我使用了三个 tapGestures：

在主视图中切换“菜单” “菜单”上的一个（在那里做点什么） 在背景视图中再次关闭“菜单”， 像这样：

    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")
                    
                
            
        
    

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

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