SwiftUI List onTapGesture 覆蓋 NavigationLink

Question

我想在點擊列表背景時隱藏鍵盤，但 onTapGesture 會覆蓋 NavigationLink。 這是一個錯誤還是有更好的解決方案？

struct ContentView: View {
    @State var text: String = ""
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink("NextPage", destination: Text("Page"))
                
                TextField("Placeholder", text: $text)
            }
            .onTapGesture {
                
                // hide keyboard...
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            }
        }
    }
}

謝謝！

更新

感謝 asperi，我找到了另一種方法：只需將其放在 header 部分即可。 至於樣式，我們應該為 NavigationLink 創建一個自定義的 ButtonStyle。

這是使用 InsetGroupedListStyle 的示例。

struct ContentView: View {
    @State var text: String = ""
    
    var body: some View {
        NavigationView {
            List {
                Section(
                    header: NavigationLink(destination: Text("Page")) {
                        HStack {
                            Text("NextPage")
                                .font(.body)
                                .foregroundColor(Color.primary)
                            
                            Spacer()
                            
                            Image(systemName: "chevron.forward")
                                .imageScale(.large)
                                .font(Font.caption2.bold())
                                .foregroundColor(Color(UIColor.tertiaryLabel))
                            
                        }
                        .padding(.vertical, 12)
                        .padding(.horizontal)
                    }
                    .textCase(nil)
                    .buttonStyle(CellButtonStyle())
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                    .padding(.horizontal, -16)
                ) {}
                
                TextField("Placeholder", text: $text)
                
            }.listStyle(InsetGroupedListStyle())
            .onTapGesture {
                
                // hide keyboard...
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            }
        }
    }
}

struct CellButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(
                configuration.isPressed
                    ? Color(UIColor.systemGray5)
                    : Color(UIColor.secondarySystemGroupedBackground)
            )
    }
}

Answer 1

這是解決此問題的一個可能方向 - 通過同時處理所有水龍頭並以編程方式導航。 用 Xcode 12 / iOS 14 測試。

truct ContentView: View {
    @State var text: String = ""

    var body: some View {
        NavigationView {
            List {
                MyRowView()
                TextField("Placeholder", text: $text)
            }
            .simultaneousGesture(TapGesture().onEnded {

                // hide keyboard...
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            })
        }
    }
}

struct MyRowView: View {
    @State private var isActive = false
    var body: some View {
        NavigationLink("NextPage", destination: Text("Page"), isActive: $isActive)
            .contentShape(Rectangle())
            .onTapGesture {
                DispatchQueue.main.async { // maybe even with some delay
                    self.isActive = true
                }
            }
    }
}