如何在简单的 SwiftUI 应用程序中有效使用导航链接？

Question

我真的非常不擅长为 SwiftUI 编写代码！我一直在尝试创建一个用于高尔夫的应用程序，我首先想要的是将带有 link 的逐洞列表显示到显示该洞的 swift 文件或图像。因此，单击列表中的 Hole 1 会将我带到一个新屏幕，其中显示了该 Hole 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

我建议您浏览 here 的建筑列表和导航教程。

You’ll create views that can show information about any landmark, and dynamically generate a scrolling list that a user can tap to see a detail view for a landmark. To fine-tune the UI, you’ll use Xcode’s canvas to render multiple previews at different device sizes.

这应该让你继续：

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()
    }
}

如何在简单的 SwiftUI 应用程序中有效使用导航链接？

How do I effectively use navigation links in a simple SwiftUI app?

navigation

swiftui