Skip to content

在列表和详情之间设置路由

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

把 list 嵌入一个 NavigationView 中,并把每个行视图嵌套在一个 NavigationButton 中来设置到目标视图的跳转,这样 list 就具有了导航功能。

第 1 步

Views 目录中创建一个名为 LandmarkDetail.swift 的 SwiftUI View。

第 2 步

ContentView.swiftbody 属性的内容复制到 LandmarkDetail.swift

技巧

在 Xcode 中,先使用 command + a 选中文件内容,然后使用 control + i 来格式化代码。

第 3 步

ContentView.swiftbody 属性替换为显示 LandmarkList

在接下来的几个步骤中,将在列表和详情视图中添加导航。

第 4 步

NavigationView 中嵌入动态生成的 landmark 列表。

第 5 步

调用 navigationTitle(_:) 修饰符方法来设置显示列表时导航栏的标题。

第 6 步

在列表的闭包中,将返回的行包裹在一个 NavigationLink 中,指定 LandmarkDetail 视图为值。

更多关于 NavigationLink 的使用方法,请查询官方文档:https://developer.apple.com/documentation/swiftui/navigationlink

第 7 步

切换到实时模式直接在预览中尝试导航。点击实时预览按钮,并点击一个地标来访问详情页面。

在列表和详情之间设置路由 has loaded