How to make List Item row with a button inside not clickable in Swift UI?

Question

Is there a way to make it so that the whole row of a list is not clickable?

I'm trying to make it so that only the button is clickable on the button row.

As you can see, if I try to click on anywhere in the button's row, whether on the button itself, or even on the white space around it, it treats it as a tap:

Is there a way to make it so that you can only click on the button itself, and not the white spacing around it? (i.e. the row itself)

This is the code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Text("Next screen")) {
                    Text("Item")
            }
            Button(action: {}) {
                Text("Button")
            }
            .padding(.vertical, 12)
            .frame(maxWidth: .infinity)
            .background(Color(UIColor.secondarySystemBackground))
            }
        }
    }
}

And yes, in this implementation I absolutely have to put these elements in a List, so I don't really have any other choice (e.g. to normally use a VStack)

Answer 1

Make it non-default button style, like Plain or your custom

Button(action: {}) {
    Text("Button")
       .frame(maxWidth: .infinity, maxHeight: .infinity)
       .contentShape(Rectangle())
}
.buttonStyle(PlainButtonStyle())  // << here !!

See also this post for example of do similar with custom button style