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

我建议您浏览here上的“建筑清单和导航”教程。

您将创建视图，以显示有关任何地标的信息，并动态生成滚动列表，用户可以点击该列表以查看地标的详细视图。要微调用户界面，您将使用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()
    }
}

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

1 个答案: