SwiftUI 模式关闭

Question

我想通过点击我调用它的同一个按钮或点击屏幕上的任意位置来关闭模式。

但是当弹出窗口弹出时，它不允许我与他们中的任何一个交互。可以给我一个解决方案吗？

ZStack{
                Color.black.opacity(0.4)
                    .edgesIgnoringSafeArea(.all)
                    .animation(.none)
                VStack{
                    Circle().fill(Color.orange)
                        .frame(width: 70, height: 70)
                        .overlay(Image(systemName: "questionmark.circle").font(.system(size: 50)).foregroundColor(.white
                        ))
                        .offset(y: 40)
                        .zIndex(1)
                    VStack{
                        Color.orange.frame(height: 40)
                        Spacer()
                        Text("Let the popup open")
                        Spacer()
                        Button("Present!") {
                            isPresented.toggle()
                        }
                        .fullScreenCover(isPresented: $isPresented){
                            FullScreenModalView(showPopUP: $showPopUp)
                        }.padding(.vertical, 12)
                        .frame(maxWidth: .infinity)
                        .background(Color.orange)
                    }.background(Color.white)
                    .cornerRadius(12)
                }.frame(height: 250)
                .background(Color.clear)
                .padding(.horizontal, 35)
                .offset(y: 150)
                .scaleEffect(x: showPopUp ? 1 : 0.8, y: showPopUp ? 1 : 1.3)
                .animation(.interactiveSpring(response: 0.3, dampingFraction: 0.3), value: animate)
            }.opacity(showPopUp ? 1 : 0)

Answer 1

您的示例没有包含足够的代码来编译，所以我制作了一个更小、最小的示例来展示这个想法：

struct ContentView: View {
    @State var modalPresented = false
    
    var body: some View {
        Button(action: {
            modalPresented.toggle()
        }) {
            Text("Present")
        }.fullScreenCover(isPresented: $modalPresented) {
            ModalContent(presented: $modalPresented)
        }
    }
}

struct ModalContent : View {
    @Binding var presented : Bool
    
    var body: some View {
        VStack {
            Text("Modal content")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            Color.green.edgesIgnoringSafeArea(.all)
                .onTapGesture {
                    presented = false
                }
        )
        //.contentShape(Rectangle())
        //.onTapGesture { presented = false }
    }
}

根据定义，由于您使用的是全屏封面，因此您将无法与原始按钮进行交互——它将被遮盖。

在我的示例中，我使用模式的背景来响应点击手势以关闭模式，但我还注释掉了几行您可以在主堆栈上使用contentShape并在那里捕捉点击手势。