原文鏈接:https://github.com/fzhlee/SwiftUI-Guide#-%E7%AC%AC3%E8%8A%82pagenavigation-
我們經(jīng)常遇到這樣的應(yīng)用場景载庭,通過點擊列表不同的選項看彼,進(jìn)入不同的詳情頁面,本節(jié)課就來實現(xiàn)這樣的效果囚聚。
示例代碼:
import SwiftUI
struct InfoModel : Hashable { //定義一個遵循Hashable協(xié)議的結(jié)構(gòu)體靖榕,作為頁面跳轉(zhuǎn)時所需要傳遞的數(shù)據(jù)的類型,當(dāng)類型遵循該協(xié)議時顽铸,它的實例會擁有哈希值茁计,通過哈希值可以判斷類型的兩個實例是否相同
var description : String //圖片的描述文字
var pictureName : String //圖片名稱
}
struct ContentView : View {
var messages : [InfoModel] //列表的數(shù)據(jù)源
var body: some View {
return NavigationView{
List{
ForEach(messages, id: \.self) { message in //根據(jù)數(shù)組的索引,創(chuàng)建導(dǎo)航按鈕谓松,并設(shè)置導(dǎo)航按鈕的目標(biāo)視圖為自定義的DetailView
NavigationLink(destination: DetailView(imageName: message.pictureName)) {
Text(message.description)
}
}
}.navigationBarTitle("Picture List")
}
}
}
struct DetailView : View { //定義一個遵循View協(xié)議的結(jié)構(gòu)體星压,作為導(dǎo)航的目標(biāo)頁面
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