how to put the array values into a list of buttons that opens new views based what is clicked - swift

Question

as you can see the HStack is very redundant.
I want to have an array of some type that contains both the image and the text
But I do not know how to put that array into the list, more importantly I do not know how to recognize which element in the array was clicked and open a new view based on what is clicked
struct ContentView: View {
var body: some View {
ZStack {
NavigationView {
List {
// as you can see the HStack is very redundant.
// I want to have an array of some type that contains both the image and the text
// But I do not know how to put that array into the list, more importantly I do not know how to recognize which element in the array was clicked and open a new view based on what is clicked
HStack {
Image("someImage")
.resizable()
.frame(width: 50, height: 50, alignment: .leading)
.clipShape(Circle())
NavigationLink (destination: SomeView()) {
Text("SomeText").foregroundColor(.gray)
.bold()
}
}
HStack {
Image("Image2")
.resizable()
.clipShape(Circle())
.frame(width: 50, height: 50, alignment: .leading)
NavigationLink(destination: image2()) {
Text("text2").foregroundColor(.gray)
.bold()
}
}
HStack {
Image("image3")
.resizable()
.clipShape(Circle())
.frame(width: 50, height: 50, alignment: .leading)
NavigationLink(destination: view3()) {
Text("view3").foregroundColor(.gray)
.bold()
}
}
}.navigationBarTitle("list")
}
}
}
}

Answer 1

You will need a 3 different arrays or a Model, I'll demonstrate it with the first approach with arrays since your question was specific about arrays.
import SwiftUI
struct ContentView: View {
let views: [AnyView] = [AnyView(SomeView()), AnyView(Image2()), AnyView(View3())]
var body: some View {
NavigationView {
List {
ForEach(0...2, id: \.self) { index in
NavigationLink (destination: self.views[index]) {
ListRowView(index: index)
}
}
}.navigationBarTitle("List")
}
}
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
struct ListRowView: View {
var index: Int
let imageNames: [String] = ["cart","star","book"]
let textList: [String] = ["SomeText","text2","view3"]
var body: some View {
HStack {
Image(systemName: self.imageNames[index])
.resizable()
.clipShape(Circle())
.frame(width: 50, height: 50, alignment: .leading)
Text(self.textList[index])
.foregroundColor(.gray)
.bold()
}
}
}
struct SomeView: View {
var body: some View {
Text("SomeView")
.foregroundColor(.gray)
.bold()
}
}
struct Image2: View {
var body: some View {
Text("Image2")
.foregroundColor(.gray)
.bold()
}
}
struct View3: View {
var body: some View {
Text("View3")
.foregroundColor(.gray)
.bold()
}
}
The first array is representing your destination views with its type as AnyView, the another two arrays are a regular String arrays representing your image names and the text. I used systemName images for demonstration purposes only and you can use your own image names from the assets.
I hope it is what you are looking for, and if the answer worked for you please accept it as an answer. Also do not hesitate to engage in comments!

Answer 2

you can do it like this:
public struct ImageTextView<Destination> : Hashable where Destination: View {
public static func == (lhs: ImageTextView<Destination>, rhs: ImageTextView<Destination>) -> Bool {
return lhs.uuid == rhs.uuid
}
public var hashValue: Int {
return uuid.hashValue
}
var uuid = UUID().uuidString
var image: Image
var text : String
var destination: Destination
init(image: Image, text: String, destination: Destination) {
self.image = image
self.text = text
self.destination = destination
}
}
struct SomeView: View {
var body: some View {
Text ("navigation target")
}
}
let rows = [
ImageTextView(image: Image("someImage"), text: "SomeText", destination: SomeView())
// ImageTextView(image: Image("image2"), text: "text2", destination: SomeView())
]
struct ContentView: View {
var body: some View {
ZStack {
NavigationView {
List {
// as you can see the HStack is very redundant.
// I want to have an array of some type that contains both the image and the text
// But I do not know how to put that array into the list, more importantly I do not know how to recognize which element in the array was clicked and open a new view based on what is clicked
ForEach (rows, id: \.self) { row in
HStack {
row.image
.resizable()
.frame(width: 50, height: 50, alignment: .leading)
.clipShape(Circle())
NavigationLink (destination: SomeView()) {
Text(row.text).foregroundColor(.gray)
.bold()
}
}
}
}.navigationBarTitle("list")
}
}
}
}