SwiftUI onTapGesture block NavigationLink action

Question

I want to press a cell of List to display a menu then click the menu push to a new view by NavigationLink.

Here is my code:

import SwiftUI

struct ContentView: View {
    let array = ["a", "b"]

    @State var isPushed: Bool = false

    @State var isDisplayMenu: Bool = false
    @State var isDestination1Clicked: Bool = false
    var body: some View {
        NavigationView {
            List {
                ForEach(array, id:\.self) { value in
                    VStack {
                        RowView(title: value)
                         .frame(maxWidth: .infinity)
                        if isDisplayMenu {
                            HStack {
                                ZStack {
                                    Text("D1")
                                    NavigationLink(
                                        destination: Destination1(),
                                        label: {
                                            EmptyView()}).hidden()
                                }

                                ZStack {
                                    Text("D2")
                                    NavigationLink(
                                        destination: Destination2(),
                                        label: {
                                            EmptyView()}).hidden()
                                }
                            }

                        }
                    }
                    .background(Color.green)
                    .contentShape(Rectangle())
                    .onTapGesture(count: 1, perform: {
                        isDisplayMenu.toggle()
                    })
                }
            }
        }

    }
}

struct Destination1: View {
    var body: some View {
        Text("D1")
    }
}

struct Destination2: View {
    var body: some View {
        Text("D2")
    }
}

struct RowView: View {

    var title: String

    var body: some View {
        VStack {
            Text("title")
            Text(title)
        }.background(Color.red)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

When click the cell the D1 and D2 was displayed. But the NavigationLink doesn't work.

I think the reason is onTapGesture blocked it. How can I make the NavigationLink works?

Any help? thanks!

Since " Suggested edit queue is full" I will add my suggestion as a comment here... It is better you can ask , How to use more than one NavigationLink in a same List cell. — YodagamaHeshan, Nov 12 '20 at 03:15
@Yodagama thanks, I'm trying to use two `Button` control `isActive` of one `NavigationLink`, not sure it helps, just cost two long on this issue. If I can't make it work I will choose your approach,. — William Hu, Nov 12 '20 at 03:24
yes you can go to that approach, somehow you can use one NavigationLink active at a time in List cell. — YodagamaHeshan, Nov 12 '20 at 03:40
Does this answer your question https://stackoverflow.com/a/63497954/12299030 or https://stackoverflow.com/a/63197406/12299030? — Asperi, Nov 12 '20 at 04:16
@Yodagama yes, but you can control the destination ` destination: isDestination1Clicked ? AnyView(Destination1()) : AnyView(Destination2())` — William Hu, Nov 12 '20 at 04:26

score 1 · Accepted Answer · answered Nov 12 '20 at 02:57

There are some restriction defined in List to be just a List itself.

So that we cannot use more than one NavigationLink inside a List cell ( If we use more than one , we cannot get expected behaviour)

And also Empty views does not get touch events.

Here is the fixes for your code.

struct ContentView: View {
    let array = ["a", "b"]
    
    @State var isPushed: Bool = false
    
    @State var isDisplayMenu: Bool = true
    @State var isDestination1Clicked: Bool = false
    var body: some View {
        NavigationView {
            ScrollView {
                ForEach(array, id:\.self) { value in
                    VStack {
                        RowView(title: value)
                            .frame(maxWidth: .infinity)
                            .background(Color.green)
                            .onTapGesture(count: 1, perform: {
                                withAnimation {
                                    isDisplayMenu.toggle()
                                }
                            })
                        
                        if isDisplayMenu {
                            HStack {
                                
                                NavigationLink(
                                    destination: Destination1(),
                                    label: {
                                        Spacer()
                                        Text("D1")
                                            .foregroundColor(.black)
                                        Spacer()
                                    })
                                
                                NavigationLink(
                                    destination: Destination2(),
                                    label: {
                                        Spacer()
                                        Text("D2")
                                        Spacer()
                                    })
                                    .foregroundColor(.black)
                                
                            }
                            .background(Color.purple)
                            
                        }
                    }
                    .padding()
                    .contentShape(Rectangle())
                    
                }
            }
        }
        
    }
}

struct Destination1: View {
    var body: some View {
        Text("D1")
    }
}

struct Destination2: View {
    var body: some View {
        Text("D2")
    }
}

struct RowView: View {
    
    var title: String
    
    var body: some View {
        VStack {
            Text("title")
            Text(title)
        }.background(Color.red)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Thanks, this works. Also I tired two Buttons with one navigationLink it works finally. — William Hu, Nov 12 '20 at 04:29

score 0 · Answer 2 · answered Nov 12 '20 at 02:10

0

try to attach the "onTapGesture" to the "NavigationView".

NavigationView {
  ....
 }.onTapGesture(count: 1, perform: {
        isDisplayMenu.toggle()
 })

answered Nov 12 '20 at 02:10

workingdog support Ukraine

26,280
4
27
37

Hi did you try it? I just tired still the same. – William Hu Nov 12 '20 at 02:13
yes tried it, works well for me on macos 11 and ios 14.2 using xcode 12.2 beta. Because the way you have it setup, you need to click a few times. – workingdog support Ukraine Nov 12 '20 at 02:32
I'm using macOS 10.15 with Xcode 12. Still no luck. – William Hu Nov 12 '20 at 02:36
correction. It works most of the time for me now. On macos 11, when I click on say D1, it sometimes does not respond. I also get "SwiftUI encountered an issue when pushing aNavigationLink. Please file a bug." in the console. – workingdog support Ukraine Nov 12 '20 at 02:55
No issue with NavigationLink in SwiftUI. you may have done a mistake. – YodagamaHeshan Nov 12 '20 at 02:59
@Yodagama, your solution works well. I was referring to my previous comment. – workingdog support Ukraine Nov 12 '20 at 03:02
its ok . you can upvote it.( I will delete this comment soon) – YodagamaHeshan Nov 12 '20 at 03:14

SwiftUI onTapGesture block NavigationLink action

2 Answers2