Lists that have a VStack containing a NavigationLink makes the whole area of the VStack tappable instead of only the SubView

Question

When I put a VStack in a List and one of the SubViews of the VStack is a NavigationLink the whole area of the VStack becomes tappable to trigger the transition as opposed to just the SubView.

This is a simplified example of my problem:

struct Test: View {
    var body: some View {
        NavigationView {
            List {
                VStack {  // Entire VStack is tappable.
                    Rectangle()
                        .frame(width: 100, height: 200)
                        .foregroundColor(.red)

                    NavigationLink(destination: Destination()) {
                        Rectangle()  // I only want this Rectangle to be tappable.
                            .frame(width: 50, height: 100)
                            .foregroundColor(.red)
                    }
                }
            }
        }
    }
}

struct Destination: View {
    var body: some View {
        Text("Hello")
    }
}

I've tried using BorderlessButtonStyle() everywhere since it's worked before, but for some reason it isn't solving my problem now.

Why exactly does behaviour like this occur?

Answer 1

Try this.

  struct ContentView: View {
    @State var isSelected: Bool = false
    var body: some View {
        NavigationView {
            VStack {
                Rectangle()
                    .frame(width: 100, height: 200)
                    .foregroundColor(.red)

                Button(action: {
                    self.isSelected.toggle()
                }) {
                    Rectangle()
                        .frame(width: 100, height: 50)
                        .foregroundColor(.red)
                        .cornerRadius(10)
                }
                NavigationLink(destination: SecondView(), isActive: self.$isSelected) {
                    EmptyView()
                }
            }
            .navigationBarTitle("First Page")
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Second Page")
        }
    .navigationBarTitle("Second Page")
    }
}