NavigationLink touch area

Question

I'm trying to use NavigationLink inside List. For a specific reason, it is in .background with EmptyView().

var body: some View {
    List {
        Section {
            HStack {
                Image(systemName: "checkmark")
                    .frame(width: 30, height: 30, alignment: .center)
                    .opacity(selected ? 1 : 0)
                Text("TEST")
                Spacer()
            }
            .onTapGesture {
                selected.toggle()
            }
            .background(
                NavigationLink(destination: WifiView()) { EmptyView() }
                    .disabled(isPad)
            )
        }
    }
}

The problem is the touch area for the NavigationLink is not as expected.

.background's area is as above.

but NavigationLink and EmptyView's area is as above. I tried to force the frame with .frame but it won't change.

What am I missing?

Answer 1

try something like this, works well for me:

var body: some View {
    List {
        Section {
            HStack {
                Image(systemName: "checkmark")
                    .frame(width: 30, height: 30, alignment: .center)
                    .opacity(selected ? 1 : 0)
                Text("TEST")
                Spacer()
            }
                .contentShape(Rectangle())  // <--- here
                .onTapGesture {
                    selected.toggle()
                }
                .background(
                    NavigationLink(destination: WifiView()) { EmptyView() }
                        .disabled(isPad)
                )
        }
    }
}