0

我正在开发一个包含运动列表的应用程序，我为运动的名称和图像构建了一个可重复使用的视图，用于列出每项运动。然后，当用户从运动列表中点击运动图像时，我为要打开的每项运动创建了一个视图，我为图像、运动名称和链接创建了一个变量，我不知道如何将变量与 NavigationLink 链接。我在这里迷路了，任何帮助将不胜感激。下面是我的代码。

struct SportTypeInsetView: View {
var buttonImage1: String
var buttonName1: String
var buttonLink1: String
var body: some View {
VStack {
NavigationView {
VStack {
  Button (action: {
                        
}) {
  Image(buttonImage1)
   .resizable()
   .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
    }
     .frame(width: 50, height: 30)
                
    Text(buttonName1)
    .font(.footnote)
    .foregroundColor(.primary)
    .multilineTextAlignment(.leading)
     .lineLimit(1)
       }
      }
    }
   } 
}

SportTypeInsetView(buttonImage1: "Yoga-icon", buttonName1: "Yoga",buttonLink1: )

点击按钮时如何将其连接到 YogaView()？

谢谢。

4

2 回答 2

0

最简单的方法是Button用NavigationLink. 在 中NavigationLink，您向它传递一个视图 ( YogaView)，并且您可以像任何其他视图一样为其提供参数。这是一个例子：

struct ContentView : View {
    var body: some View {
        SportTypeInsetView(buttonImage1: "0", buttonName1: "Button", buttonLink1: "Link")
    }
}

struct SportTypeInsetView: View {
    var buttonImage1: String
    var buttonName1: String
    var buttonLink1: String
    
    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    NavigationLink(destination: YogaView(linkName: buttonLink1)) {
                        Image(buttonImage1)
                            .resizable()
                            .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                            .frame(width: 50, height: 30)
                    }
                    
                    Text(buttonName1)
                        .font(.footnote)
                        .foregroundColor(.primary)
                        .multilineTextAlignment(.leading)
                        .lineLimit(1)
                }
            }
        }
    }
}

struct YogaView : View {
    var linkName : String
    
    var body: some View {
        Text(linkName)
    }
}

如果你真的想用一个按钮来做，你可以用isActive属性NavigationLink和一个@State变量来做：

struct SportTypeInsetView: View {
    var buttonImage1: String
    var buttonName1: String
    var buttonLink1: String
    
    @State private var linkActive = false
    
    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    Button(action: { linkActive = true }) {
                        Image(buttonImage1)
                            .resizable()
                            .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                            .frame(width: 50, height: 30)
                    }
                    .overlay(
                        NavigationLink(destination: YogaView(linkName: buttonLink1), isActive: $linkActive) {
                            EmptyView()
                        })
                    
                    Text(buttonName1)
                        .font(.footnote)
                        .foregroundColor(.primary)
                        .multilineTextAlignment(.leading)
                        .lineLimit(1)
                }
            }
        }
    }
}
于 2021-02-07T19:28:11.073 回答
0

您可以将 NavigationLink 与按钮 Style 一起使用DefaultButtonStyle。

NavigationLink 有一个 label 参数，它基本上是一个 SwiftUI 视图对象，您可以简单地传递一个Text对象，使其看起来像 button 或两者都传递Imageand Text，这取决于您，最终结果将是 button style NavigationLink。

提供按钮样式有助于为您提供类似按钮的感觉。

NavigationLink(destination: SportDetailView(),
               label: {
                        Text("Navigate To next Screen")
             }).buttonStyle(DefaultButtonStyle())

如果你想自定义 NavigationLink 标签视图，你可以这样做。

  NavigationLink(destination: SportDetailView(),
                 label: {
                           HStack {
                               Image(systemName: "pencil")
                               Text("Edit name")
                           }
               }).buttonStyle(DefaultButtonStyle())

为了实现行为动态的导航链接，SportTypeInsetView可以具有TargetView受View协议约束的通用类型。

话虽如此，您不需要buttonLink1，因为它targetView本身是动态的。

ex: 
SportTypeInsetView(targetView: YogaView(), buttonImage1: "Tap", buttonName1: "Button A", buttonLink1: "")

ex:
SportTypeInsetView(targetView: SomeAnotherSportView(), buttonImage1: "Tap", buttonName1: "Button B", buttonLink1: "")

struct SportTypeInsetView<TargetView: View>: View {

    let targetView: TargetView
    var buttonImage1: String
    var buttonName1: String
    var buttonLink1: String
    
    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    NavigationLink(
                        destination: self.targetView,
                        label: {
                            //Add Image , text or button here
                            Text("Navigation to next")
                        }).buttonStyle(DefaultButtonStyle())
                    
                    
                    Text(buttonName1)
                        .font(.footnote)
                        .foregroundColor(.secondary)
                        .multilineTextAlignment(.leading)
                        .lineLimit(1)
                }
            }
        }
    }
}
于 2021-02-07T19:50:40.767 回答