when click list item, open new SwiftUI for every list items in SwiftUI

I have a simple SwiftUI project, when I click the any list items, I want to route different SwiftUI. Below, I used arrays, and for every SwiftUI, I want to use [0], [1],..., but it throw error, I do not know why? Any idea?

ContentView:
Code Block
import SwiftUI
struct ContentView: View {
  var body: some View {
    NavigationView {
      List(contacts) { contact in
        NavigationLink(destination: NumberOneView(contact: contact)) {
          ContactRow(contact: contact)
        }
      }
      .navigationBarTitle("Contacts")
    }
    .environment(\.colorScheme, .light)
  }
}
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}
struct ContactRow: View {
   
  let contact: Settings
   
  var body: some View {
    HStack {
      Image(contact.imageName)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 20, height: 20)
        
         
      VStack(alignment: .leading) {
        Text(contact.name)
          .font(.system(size: 21, weight: .medium, design: .default))
        
      }
    }
  }
}



Settings.swift:

Code Block import Foundation
import SwiftUI
struct Settings: Identifiable {
let imageName: String
let name: String
let id = UUID()
}
let contacts = [
Settings(imageName: "image1", name: "NumberOne"),
Settings(imageName: "image2", name: "NumberTwo"),
Settings(imageName: "image3", name: "NumberThree"),
Settings(imageName: "image4", name: "NumberFour"),
]

NumberOneView:

Code Block import SwiftUI
struct NumberOneView: View {
let contact: Settings
var body: some View {
Text("hey")
}
}
struct NumberOneView_Previews: PreviewProvider {
static var previews: some View {
NumberOneView(contact: contacts[0])
}
}

NumberTwoView:

Code Block import SwiftUI
struct NumberTwoView: View {
let contact: Settings
var body: some View {
Text("hey")
}
}
struct NumberTwoView_Previews: PreviewProvider {
static var previews: some View {
NumberTwoView(contact: contacts[1])
}
}


Replies

I want to route different SwiftUI

What do you mean by different SwitUI ? Do you mean a new view ?
yes definitely, for every items, new view :)
it's not really clear what you are asking. The following code
shows how you could navigate to "different views" from your list.


Code Block
struct ContentView: View {
let contacts = [
Settings(imageName: "image1", name: "NumberOne"),
Settings(imageName: "image2", name: "NumberTwo"),
Settings(imageName: "image3", name: "NumberThree"),
Settings(imageName: "image4", name: "NumberFour"),
]
var body: some View {
NavigationView {
List(contacts) { contact in
NavigationLink(destination: NumberView(contact: contact)) {
ContactRow(contact: contact)
}
}
.navigationBarTitle("Contacts")
}.environment(\.colorScheme, .light)
}
}
struct ContactRow: View {
let contact: Settings
var body: some View {
HStack {
Image(contact.imageName)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 20, height: 20)
VStack(alignment: .leading) {
Text(contact.name)
.font(.system(size: 21, weight: .medium, design: .default))
}
}
}
}
struct Settings: Identifiable {
let imageName: String
let name: String
let id = UUID()
}
struct NumberView: View {
let contact: Settings
var body: some View {
Text("view: \(contact.name)")
}
}


Is this what you are looking for?
tnx so much for ur answer, I mean for example u have four list items, like NumberOne, NumberTwo, NumberThree, NumberFour, when You click any items, it can route new view like NumberOneView, NumberTwoView, NumberThreeView, NumberFourView. Hope it is clear :)
you can achieve what you want with the following, but it is not
a good idea to structure your code this way. The NumberView should be generic and
deal with the different "contact" as required, not a different separate view for different contact.

Imagine if you have 100 contacts, then you would need 100 different views.

Code Block
struct NumberView: View {
let contact: Settings
var body: some View {
switch contact.name {
case "NumberOne": NumberOneView(contact: contact)
case "NumberTwo": NumberTwoView(contact: contact)
case "NumberThree": NumberThreeView(contact: contact)
case "NumberFour": NumberFourView(contact: contact)
default: NumberOneView(contact: contact)
}
}
}
struct NumberOneView: View {
let contact: Settings
var body: some View {
Text("NumberOneView: \(contact.name)")
}
}
struct NumberTwoView: View {
let contact: Settings
var body: some View {
Text("NumberTwoView: \(contact.name)")
}
}
struct NumberThreeView: View {
let contact: Settings
var body: some View {
Text("NumberThreeView: \(contact.name)")
}
}
struct NumberFourView: View {
let contact: Settings
var body: some View {
Text("NumberFourView: \(contact.name)")
}
}


Tnx so much , I have intent to use it for settings menu in medicine app, for example in settings list menu I have items like that, Account, Appearance, Notifications, Contact us.. that is why I need new view for every items. If you consider for contact apps, yes I agree it is not good idea. I do not know can I use ur solution for my medicine app?