SwiftUI 官方教程（六）

6. 在列表和詳情之間設置導航

雖然列表已經能顯示了，但是我們還不能通過點擊單個地標來查看地標詳情頁面。SwiftUI教程

把 list 嵌入一個 NavigationView 中，並把每個 row 嵌套在一個 NavigationButton 中來設置到目標 view 的轉場，這樣 list 就具有了導航功能。

6.1 把自動創建地標的 list 嵌入到一個 NavigationView 中。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

調用 navigationBarTitle(_:) 方法來設置 list 顯示時導航欄的標題。

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

6.3 在 list 的閉包中，把返回的 row 包裝在一個 NavigationButton 中，並把 LandmarkDetailview 作為目標。SwiftUI教程

LandmarkList.swift

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail()) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

6.4 切換到實時模式后可以直接在預覽中嘗試導航功能。單擊 Live Preview 按鈕，然后點擊地標來訪問詳情頁面。