时间戳

首页 > 解决方案 > 将包含链接作为变量的 SwiftUI 2.0 ReusableView

swiftui - 将包含链接作为变量的 SwiftUI 2.0 ReusableView

问题描述

我正在开发一个包含运动列表的应用程序，我为运动的名称和图像构建了一个可重复使用的视图，用于列出每项运动。然后，当用户从运动列表中点击运动图像时，我为要打开的每项运动创建了一个视图，我为图像、运动名称和链接创建了一个变量，我不知道如何将变量与 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()？

谢谢。

标签： swiftuiswiftui-navigationlinkswiftui-view

解决方案

最简单的方法是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)
                }
            }
        }
    }
}

推荐阅读