如何在简单的 SwiftUI 应用中有效地使用导航链接?

Question

我在为 SwiftUI 编写代码方面真的非常非常陌生！我一直在尝试创建一个用于高尔夫的应用程序，我首先想要的只是显示一个逐洞列表，其中包含指向显示该洞的快速文件或图像的链接。因此，单击列表中的孔 1 会将我带到一个新屏幕，其中显示了该孔 1 以及图像的详细信息。

这是到目前为止的代码：

import SwiftUI
struct NavigationLists: View {
struct DetailView: View {
let holes: String
var body: some View {
Text(holes)
}
}
let holes = ["Hole 1", "Hole 2", "Hole 3", "Hole 4", "Hole 5", "Hole 6", "Hole 7", "Hole 8",     "Hole 9", "Hole 10", "Hole 11", "Hole 12", "Hole 13", "Hole 14", "Hole 15", "Hole 16", "Hole 17", "Hole 18"]
var body: some View {
NavigationView {
List(holes, id: .self) { holes in
NavigationLink(
destination: DetailView(holes: holes)) {
Text(holes)
}
}
.navigationBarTitle("Hole by Hole")
}
}
}
struct NavigationLists_Previews: PreviewProvider {
static var previews: some View {
NavigationLists()
}
}

Answer 1

我建议您浏览此处的构建列表和导航教程。

您将创建可显示有关任何地标信息的视图，并动态生成滚动列表，用户可以点击该列表以查看地标的详细信息视图。要微调 UI，您将使用 Xcode 的画布以不同的设备尺寸呈现多个预览。

这应该让你开始：

import SwiftUI
struct Hole: Hashable {
var title: String
var description: String
var imageName: String
}
struct DetailView: View {
@State var hole: Hole
var body: some View {
VStack {
Image(systemName: self.hole.imageName)
Text(self.hole.title)
Text(self.hole.description)
}
}
}
struct ContentView: View {
let holes: [Hole] = [
Hole(title: "Hole 1", description: "Hole 1 Description", imageName: "square.and.arrow.up"),
Hole(title: "Hole 2", description: "Hole 2 Description", imageName: "square.and.arrow.up.fill"),
Hole(title: "Hole 3", description: "Hole 3 Description", imageName: "pencil.circle"),
Hole(title: "Hole 4", description: "Hole 4 Description", imageName: "pencil.circle.fill")
]
var body: some View {
NavigationView {
List(self.holes, id: .self) { hole in
NavigationLink(destination: DetailView(hole: hole)) {
Text(hole.title)
}
}
.navigationBarTitle("Hole by Hole")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}