Multiple NavigationLink inside a List using SwiftUI

Question

I am trying to have two NavigationLinks inside a struct that I use as a NavigationLink inside a List with ForEach but the code does not work (the navigation does not happen to either View) , here is the code:

struct mainView : View {
    @State var people = [Person(name: "one", family: "1", type: "men"),Person(name: "two", family: "2", type: "women")]
    var body : some View {
        List{
           ForEach(self.people, id:\.self){person in 
               NavigationLink(destination: Text("hi")) {
                 PersonView(person : person)
               }.buttonStyle(BorderlessButtonStyle())
        }
    }
}


struct Person {
    var name : String
    var family : String
    var type : String
}

struct PersonView : View {
    @State var person : Person?
    var body : some View {
      HStack{
        NavigationLink(destination: Text(self.person.name)) {
           Text("this is \(self.person.name) \(self.person.family)")
        }
        NavigationLink(destination: Text(self.person.type)) {
           Text(self.person.type)
        }
      }
    }
}

I have added the .buttonStyle after reading it might help but it did nothing. I also tried the following PersonView :

struct PersonView : View {
@State var person : Person?
@State var goToFirst = false
@State var goToType = false
var body : some View {
   VStack{
      Button(action:{
         self.goToFirst.toggle()
      }){
         Text("this is \(self.person.name) \(self.person.family)")
      }.buttonStyle(BorderlessButtonStyle())
      Button(action:{
         self.goToType.toggle()
      }){
         Text(self.person.type)
      }.buttonStyle(BorderlessButtonStyle())
      NavigationLink(destination: Text(self.person.name), isActive : self.$goToFirst) {
           Text("").frame(width: 0.01, height: 0.01)
      }
      NavigationLink(destination: Text(self.person.type), isActive : self.$goToType) {
           Text("").frame(width: 0.01, height: 0.01)
      }
   }
}

This did not work as well, what am I supposed to do so when I click anywhere on the cell it will navigate to Text("hi") and when I click on the respective areas it will navigate to the proper View . Important: This view is getting navigated to from a view that is wrapped with a NavigationView

Consider this solution https://stackoverflow.com/questions/63497247/switui-two-navigationlink-in-a-list. Your case should be solved with same approach. — Asperi, Aug 22 '20 at 15:40
The thing is that I want it to be two separate "buttons" that the user can click and not to double tap on the cell like in the case of what you sent — TheMachineX, Aug 22 '20 at 16:11

score 0 · Answer 1 · answered Aug 22 '20 at 16:45

You have not added a navigationView, that is the problem.

struct MainView: View {
    @State private var peoples = [Person(name: "one", family: "1", type: "men"),Person(name: "two", family: "2", type: "women")]
    var body: some View {
        NavigationView { //This is important
            List {
                ForEach(self.peoples, id: \.name) { people in
                    NavigationLink(destination: PersonView(person: people)) {
                        Text(people.name)
                    }
                }
            }
            .navigationTitle("Demo")
        }
    }
}

struct Person {
    var name : String
    var family : String
    var type : String
}

struct PersonView : View {
    @State var person : Person?
    var body : some View {
      HStack{
        NavigationLink(destination: Text(self.person.name)) {
           Text("this is \(self.person.name) \(self.person.family)")
        }
        NavigationLink(destination: Text(self.person.type)) {
           Text(self.person.type)
        }
      }
    }
}

This view is navigated to from a different view that is wrapped in a navigationView — TheMachineX, Aug 22 '20 at 16:59
@TheMachineX best to post a concise but complete example of your problem, because now this person has put effort in an answer that's not usable right now — Bart van Kuik, Aug 22 '20 at 17:43

score 0 · Answer 2 · answered Aug 22 '20 at 18:27

I think the following does what you want. The code can be pasted into an empty project.

Some clarifications:

The List seems to make things more difficult, so I replaced it with a VStack. You may need to surround it with a ScrollView.

Also, like user Asperi hinted, this works best when you create multiple NavigationLink but around an EmptyView that is then later activated.

struct MainView: View {
    @State var people = [Person(name: "one", family: "1", type: "men"), Person(name: "two", family: "2", type: "women")]

    var body: some View {
        VStack {
            ForEach(self.people, id: \.self) { person in
                PersonView(person: person)
            }
        }
    }
}

struct Person: Hashable {
    var name: String
    var family: String
    var type: String
}

struct PersonView: View {
    let person: Person
    @State private var selection: Int?
    
    var body: some View {
        HStack {
            NavigationLink(
                destination: Text(self.person.name),
                tag: self.person.hashValue + 1,
                selection: self.$selection) {

                EmptyView()
            }
            NavigationLink(
                destination: Text(self.person.type),
                tag: self.person.hashValue + 2,
                selection: self.$selection) {
                
                EmptyView()
            }
            
            Button("this is \(self.person.name) \(self.person.family)") {
                self.selection = self.person.hashValue + 1
            }
            Spacer()
            Button(self.person.type) {
                self.selection = self.person.hashValue + 2
            }.padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            MainView()
        }
    }
}

Question was specific to a List, this answer simply removes the List. — erickva, Jun 19 '21 at 16:55

Multiple NavigationLink inside a List using SwiftUI

2 Answers2