Navigating to detail view on button click in List Row(TableviewCell) in SwiftUI

Question

I have List/TableView with Cells. Now each cell contains detail about given Item and some buttons like Edit the Item, Show Detail of Item, Show subview of given Item etc.

Now, for case of showing detail of Item, I have tried to add NavigationLink, but now if anyone clicks anywhere on that cell, it moves to detail screen.

I dont want to move to detail screen on clicking anywhere in screen, I want to push detail screen only when someone clicks "Show Detail" button in that cell.

Answer 1

1. Use the .hidden() modifier on the navigationLink to prevent the list item from capturing it's action

2. Change the .buttonStyle from automatic to something else on the list item to prevent it from capturing the button action. (for example borderless)

Working Demo

struct ContentView: View {
    @State var selectedTag: Int?

    var body: some View {
        NavigationView {
            List(1...10, id: \.self) { id in
                HStack {
                    Text("Item \(id: id)")
                    Spacer()
                    
                    Button("Show detail") { selectedTag = id }
                    .background(link(id))
                }.buttonStyle(.borderless) ///  ⚠️ on the item! **NOT** on the button!!!
            }
        }
    }
    
    func link(id: Int) -> some View {
        NavigationLink("",
            destination: Text("\(id) Selected"),
            tag: id,
            selection: $selectedTag
        ).hidden()
    }
}