Multiple NavigationLink inside a List using SwiftUI - 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

Answer 1

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)
}
}
}
}

Answer 2

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()
}
}
}