10.2 列表单元格点击的时候 push 一个新视图
SwiftUI 没有像 UITableView
有一个 didSelectRowAt
类似的方法,但是我们可以在列表视图结合 NavigationLink
来达到此功能。
首先我们先创建一些简单的数据结构,如下:
struct Restaurant: Identifiable {
var id = UUID()
var name: String
}
然后创建列表的单元格视图:
struct RestaurantRow: View {
var restaurant: Restaurant
var body: some View {
Text(restaurant.name)
}
}
最后创建列表视图:
struct ContentView: View {
var body: some View {
let first = Restaurant(name: "Joe's Original")
let restaurants = [first]
return NavigationView {
List(restaurants) { restaurant in
RestaurantRow(restaurant: restaurant)
}.navigationBarTitle(Text("Select a restaurant"))
}
}
}
现在视图上列表上已经有一个单元格了,但是它没有选中操作。
为了能够点击选中跳转到另外一个视图,我们又得创建一个子视图,算作详情页的,如下:
struct RestaurantView: View {
var restaurant: Restaurant
var body: some View {
Text("Come and eat at \(restaurant.name)")
.font(.largeTitle)
}
}
这时我们重新回到 ContentView
列表里单元格 RestaurantRow
视图上,使用 NavigationLink
进行包装,如下:
return NavigationView {
List(restaurants) { restaurant in
NavigationLink(destination: RestaurantView(restaurant: restaurant)) {
RestaurantRow(restaurant: restaurant)
}
}.navigationBarTitle(Text("Select a restaurant"))
}
如代码所示:使用了 RestaurantView(restaurant: restaurant)
作为目标视图,并且进行了传值操作。
** 注意 **: NavigationLink
至少需要在 Xcode 11 beta-3 (2019-07-02 release) 及以上版本以上才能实现。