There seems to be a problem with placing multiple NavigationLinks on a List item row in SwiftUI. If I have two links on the same row and tap one of them, SwiftUI seems to create a path using both links. Irrespective of which of the two is tapped, the view specified by the first (left-hand) appears. Tapping Back reveals the view specified by the second (right-hand) link. Tapping again returns to the list.
This problem has been mentioned before in relation to Buttons. The solution offered was to use button styles, and make sure the button areas do not overlap (how could they overlap?). This does not work
ChatGPT gave me a clear example, which it claimed would work, but just demonstrates the problem
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<10) { index in
HStack {
NavigationLink(destination: DestinationView1(item: index)) {
Text("Navigate to View 1")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
.buttonStyle(PlainButtonStyle()) // Ensure the link only activates on its area
Spacer()
NavigationLink(destination: DestinationView2(item: index)) {
Text("Navigate to View 2")
.padding()
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(8)
}
.buttonStyle(PlainButtonStyle()) // Ensure the link only activates on its area
}
.padding(.vertical, 5)
}
}
.navigationBarTitle("Navigation Links")
}
}
}
struct DestinationView1: View {
var item: Int
var body: some View {
Text("Destination View 1 for item \(item)")
.navigationBarTitle("View 1", displayMode: .inline)
}
}
struct DestinationView2: View {
var item: Int
var body: some View {
Text("Destination View 2 for item \(item)")
.navigationBarTitle("View 2", displayMode: .inline)
I may have found a simple solution.
Problem comes from List which manages interactions with rows on its own, creating the mess.
I just replaced List by a ScrollView, to get very similar display (except the ">" after button, but works OK for each link.
No need either for buttonStyle.
struct ContentView: View {
var body: some View {
NavigationView {
// List {
ScrollView {
ForEach(0..<10) { index in
HStack {
Spacer()
NavigationLink(destination: DestinationView1(item: index)) {
Text("Navigate to View 1")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
// .buttonStyle(PlainButtonStyle()) // Not needed
Spacer()
NavigationLink(destination: DestinationView2(item: index)) {
Text("Navigate to View 2")
.padding()
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(8)
}
// .buttonStyle(PlainButtonStyle()) // Not needed
Spacer()
}
.padding(.vertical, 5)
}
}
.navigationBarTitle("Navigation Links")
}
}
}
struct DestinationView1: View {
var item: Int
var body: some View {
Text("Destination View 1 for item \(item)")
.navigationBarTitle("View 1", displayMode: .inline)
}
}
struct DestinationView2: View {
var item: Int
var body: some View {
Text("Destination View 2 for item \(item)")
.navigationBarTitle("View 2", displayMode: .inline)
}
}