首页 > 解决方案 > 如何将数组值放入按钮列表中,根据单击的内容打开新视图

问题描述

如您所见,HStack 非常多余。我想要一个包含图像和文本的某种类型的数组但我不知道如何将该数组放入列表中,更重要的是我不知道如何识别数组中的哪个元素被单击并打开基于点击内容的新视图

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

标签: swiftswiftui

解决方案


你可以这样做:

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

推荐阅读