How can you have other selectable areas within a List row with NavigationLink?

Question

I can't get a row to be selectable for something other than navigating, if there's also a NavigationLink in the row view. This is no problem with UIKit. Is it impossible because of lack of implementation at present, just a bug, or is it in fact presently possible?

This is probably the simplest snippet that can illustrate the problem.

struct ContentView: View {
  var body: some View {
    NavigationView {
      List {
        HStack {
          Button("How can I tap over here without transitioning?") { }
          NavigationLink( destination: ContentView() ) {
            Spacer()
          }
        }
      }
    }
  }
}

I don't know if it is a bug or as per design. As a workaround, you can use `Text("My Button").tapAction { ... }`. Unfortunately, you would loose Button's styling, so you may need to create your own custom button. — kontiki, Jul 28 '19 at 04:02
I'm wondering about this too. It seems possible, since in Apple's Workout app on watchOS there's a button with an ellipsis image on each row that leads to settings for the workout, while the overall row starts a workout. — Curiosity, Sep 14 '20 at 07:50

score 2 · Answer 1 · answered Sep 14 '20 at 12:17

Your button should be not default style.

Here is a simple demo of possible approach. Prepared & tested with Xcode 11.7 / iOS 13.7

struct ContentView: View {
    @State private var selected = false
    var body: some View {
        NavigationView {
            List {
                HStack {
                    Button(action: { self.selected.toggle() }) {
                        Image(systemName: selected ? "checkmark.circle" : "circle")
                    }.buttonStyle(PlainButtonStyle())
                    .padding(.horizontal)

                    NavigationLink( destination: Text("Details") ) {
                        Text("Link")
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
            }
        }
    }
}

I forgot I had this question until it got bountied today. I have since found out about this, here: https://stackoverflow.com/a/59402642/652038. (It works with this year’s beta software too.) But this is only the how. Not the why! — , Sep 14 '20 at 12:45

How can you have other selectable areas within a List row with NavigationLink?

1 Answers1