SwiftUI—点击列表不同的选项进入不同的详情页面

原文链接：https://github.com/fzhlee/SwiftUI-Guide#-%E7%AC%AC3%E8%8A%82pagenavigation-

我们经常遇到这样的应用场景，通过点击列表不同的选项，进入不同的详情页面，本节课就来实现这样的效果。

示例代码：

import SwiftUI

struct InfoModel : Hashable { //定义一个遵循Hashable协议的结构体，作为页面跳转时所需要传递的数据的类型，当类型遵循该协议时，它的实例会拥有哈希值，通过哈希值可以判断类型的两个实例是否相同
    var description : String //图片的描述文字
    var pictureName : String //图片名称
}
struct ContentView : View {
    
    var messages : [InfoModel] //列表的数据源
    
    var body: some View {
        return NavigationView{
            List{
                ForEach(messages, id: \.self) { message in //根据数组的索引，创建导航按钮，并设置导航按钮的目标视图为自定义的DetailView
                    NavigationLink(destination: DetailView(imageName: message.pictureName)) {
                        Text(message.description)
                    }
                }
            }.navigationBarTitle("Picture List")
        }
    }
}
struct DetailView : View { //定义一个遵循View协议的结构体，作为导航的目标页面
    var imageName : String //表示需要显示的图片的名称
    var body: some View{
        Image(imageName)
    }
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        let model1 = InfoModel(description: "A lady with a horse", pictureName: "Picture1")
        let model2 = InfoModel(description: "An African animal with a very long neck", pictureName: "Picture2")
        return ContentView(messages: [model1, model2])
    }
}
#endif

image