如何通过SwiftUI正确使用NavigationLink

时间:2019-11-13 21:32:57

标签: swift navigation swiftui

这里是全新的编码器,也是第一次使用。如果这对大多数人来说太容易了,我深表歉意。我在使用naviationLink从上下文视图切换到详细视图时遇到问题。我想展示一排吉他,然后展示从表中选择的吉他的详细视图。

以下是一些详细信息。我有一个Guitars.swift文件,其中包含吉他列表。 (见下文)

import Foundation

struct Guitars: Identifiable, Hashable {
    let id: Int
    let name, description, imageName: String
    }

 let guitar: [Guitars] = [
     .init (id: 1, name: "Classical", description: "This is a nylon string guitar that is acoustic and made if cedar or spruce wood", imageName: "classical"),
     .init (id: 2, name: "Acoustic", description: "The acoustic guitar is a steel string instrument that is traditionally played as an accompanying part of a musical performance.", imageName: "acoustic"),
     .init (id: 3, name: "Electric", description: "This is a steel string guitar that is electic with pickups and made to be played through amplifiers", imageName: "electric_guitar-1"),
     .init (id: 4, name: "Banjo", description: "This is a steel string guitar that has five strings.  It's usually played in country and bluegrass music", imageName: "banjo"),
     .init (id: 5, name: "Bass", description: "This is a steel string guitar that has four strings.  It's usually played in all types of bands and provides the bass line for the music", imageName: "bass")

 ]

我有一个GuitarDetails文件,其中包含定义的属性和结构。 (见下文)

struct GuitarDetails: View {

    var selectedGuitar: Guitars

    var body: some View {
        VStack{
            Image(selectedGuitar.name)
            .resizable()
            .frame(width:300, height: 300)
            VStack {
                Spacer()

            }
        }
    }
}

struct GuitarDetails_Previews: PreviewProvider {
    static var previews: some View {
        GuitarDetails(selectedGuitar: <#T##Guitars#>)

最后,我有一个ContentView文件,我在其中创建了NavigationLink,以从内容视图移动到详细信息视图,但是无法正常工作。有人可以帮我吗?这是内容查看代码。

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List (Guitars) { guitar in
                NavigationLink(destination: GuitarDetails(selectedGuitar: guitar) {
           }
         }
       }
      }
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
  }
 }
}

我得到的错误是:“'GuitarDetails.Type'无法转换为'((Guitars)-> GuitarDetails'

1 个答案:

答案 0 :(得分:0)

您需要传递guitar数组,而不是Guitars中的类型List。这就是为什么您会收到该错误。

尽管命名不好,但是单数形式使用了复数形式,而复数形式使用了单数形式。这可能会导致混乱,最好对所描述的内容使用适当的术语。

例如,您的Guitars结构仅描述了一把吉他,因此应将其真正重命名为Guitar。类似地,吉他阵列的名称为guitar,因为它是吉他阵列,所以没有意义,因此它应该确实是复数形式,并命名为guitars

理想情况下,您应该有这样的东西;注意,我使用了更合适的命名约定。

struct Guitar: Identifiable, Hashable {
    let id: Int
    let name, description, imageName: String
}

// defining guitars like this, outside of a class or struct, makes it a global variable.
let guitars: [Guitar] = [
     .init (id: 1, name: "Classical", description: "This is a nylon string guitar that is acoustic and made if cedar or spruce wood", imageName: "classical"),
     .init (id: 2, name: "Acoustic", description: "The acoustic guitar is a steel string instrument that is traditionally played as an accompanying part of a musical performance.", imageName: "acoustic"),
     .init (id: 3, name: "Electric", description: "This is a steel string guitar that is electic with pickups and made to be played through amplifiers", imageName: "electric_guitar-1"),
     .init (id: 4, name: "Banjo", description: "This is a steel string guitar that has five strings.  It's usually played in country and bluegrass music", imageName: "banjo"),
     .init (id: 5, name: "Bass", description: "This is a steel string guitar that has four strings.  It's usually played in all types of bands and provides the bass line for the music", imageName: "bass")
]

然后您的GuitarDetail应该与此类似:

struct GuitarDetail: View {

    var selectedGuitar: Guitar // notice it is no longer plural, as that didn't make sense

    var body: some View {
        VStack{
            Image(selectedGuitar.imageName) // make sure you use the image name
            .resizable()
            .frame(width:300, height: 300)
            VStack {
                Spacer()

            }
        }
    }
}

最后是您的ContentView

struct ContentView: View {
    var body: some View {
        NavigationView {
            // as you have defined guitars above as a global variable you should be able to access it like this
            List (guitars) { guitar in
                NavigationLink(destination: GuitarDetail(selectedGuitar: guitar) {
                    Text(guitar.name) // you need something inside your NavigationLink for it to work
           }
        }
    }
}