SwiftUI（关闭键盘）覆盖禁用底层操作

Question

This question is related to How to hide keyboard when using SwiftUI?

Sample Code:

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        Background {
            NavigationView {
                List {
                    TextField("TextInput", text: $text)
                    Text("OnTapGesture")
                        .onTapGesture {
                            print("Text Tapped") //works
                        }
                    Button("Tap me") {
                        print("Btn Tapped") //doesn't work
                    }
                    NavigationLink("Go to detail", destination: Text("DetailView")) //doesn't work
                }
            }
        }
    }
}

struct Background<Content: View>: View {
    private var content: Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        Rectangle()
            .overlay(content)
            .onTapGesture {
                self.endEditing()
            }
    }
    
    func endEditing() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

The overlay here works as expected that I can tap anywhere to dismiss the keyboard. However, by adding onTapGesture on the overlay certain other actions don't work anymore. Is this intended? Is it a bug? Is there a way to work around that?

Answer 1

Found a one-liner solution, inspired by SwiftUI: How to dismiss the keyboard by tap on NavigationLink?

.gesture(DragGesture(minimumDistance: 20, coordinateSpace: .local).onChanged{_ in endEditing() })

This will keep all actions enabled (including delete gestures) and dismisses the keyboard when scrolling...

Answer 2

Add this modifier to the button

Button(action: {}) {
    Text("Button Tap")
    }
    .buttonStyle(PlainButtonStyle())

Complete Code

struct ContentView: View {

@State var text = ""
@State private var tap: Bool = false

var body: some View {
    Background {
        NavigationView {
            
            List {
                
                TextField("TextInput", text: $text)
                
                Text("OnTapGesture")
                    .onTapGesture {
                        print("Text Tapped") //works
                    }
                
                Button(action: buttonTapped) {
                    Text("Button Tapped")
                }
                .buttonStyle(PlainButtonStyle())
                
                NavigationLink(destination: Text("DetialView"), isActive: $tap) {
                    Button(action: tapButton) {
                        Text("Go to Navigation")
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
        }
    }
}

func buttonTapped() {
    print("Button Tapped...")
}

func tapButton() {
    tap.toggle()
}

}

I hope it will work fine