SwiftUI 官方教程（六）

6. 在列表和详情之间设置导航

虽然列表已经能显示了，但是我们还不能通过点击单个地标来查看地标详情页面。SwiftUI教程

把 list 嵌入一个 NavigationView 中，并把每个 row 嵌套在一个 NavigationButton 中来设置到目标 view 的转场，这样 list 就具有了导航功能。

6.1 把自动创建地标的 list 嵌入到一个 NavigationView 中。

LandmarkList.swift

1import SwiftUI
2
3struct LandmarkList: View {
4    var body: some View {
5        NavigationView {
6            List(landmarkData) { landmark in
7                LandmarkRow(landmark: landmark)
8            }
9        }
10    }
11}
12
13struct LandmarkList_Previews: PreviewProvider {
14    static var previews: some View {
15        LandmarkList()
16    }
17}

调用 navigationBarTitle(_:) 方法来设置 list 显示时导航栏的标题。

LandmarkList.swift

1import SwiftUI
2
3struct LandmarkList: View {
4    var body: some View {
5        NavigationView {
6            List(landmarkData) { landmark in
7                LandmarkRow(landmark: landmark)
8            }
9            .navigationBarTitle(Text("Landmarks"))
10        }
11    }
12}
13
14struct LandmarkList_Previews: PreviewProvider {
15    static var previews: some View {
16        LandmarkList()
17    }
18}

6.3 在 list 的闭包中，把返回的 row 包装在一个 NavigationButton 中，并把 LandmarkDetailview 作为目标。SwiftUI教程

LandmarkList.swift

1import SwiftUI
2
3struct LandmarkList: View {
4    var body: some View {
5        NavigationView {
6            List(landmarkData) { landmark in
7                NavigationButton(destination: LandmarkDetail()) {
8                    LandmarkRow(landmark: landmark)
9                }
10            }
11            .navigationBarTitle(Text("Landmarks"))
12        }
13    }
14}
15
16struct LandmarkList_Previews: PreviewProvider {
17    static var previews: some View {
18        LandmarkList()
19    }
20}

6.4 切换到实时模式后可以直接在预览中尝试导航功能。单击 Live Preview 按钮，然后点击地标来访问详情页面。