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

Question

Created Mar ’21

Replies 6

Boosts 0

Views 3.6k

Participants 3

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

Boost

Answer 1

Claude31 OP

Mar ’21

I want to route different SwiftUI

What do you mean by different SwitUI ? Do you mean a new view ?

0

Answer 2

skysoft13 OP

Mar ’21

yes definitely, for every items, new view :)

0

Answer 3

workingdogintokyo OP

Mar ’21

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?

1

Answer 4

skysoft13 OP

Mar ’21

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

0

Answer 5

workingdogintokyo OP

Mar ’21

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

1

Answer 6

skysoft13 OP

Mar ’21

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?

0