将具有自己的参数的 SwiftUI 视图作为变量传递给另一个视图结构

Question

我将尝试在这里概述我的案例，我有一个 NavigationLink 我想变成它自己的结构，以便我可以重复使用它。 NavigationLink 中的 Label 对于我使用的所有案例都是相同的，只是文本和图像不同。我正在尝试使包含NavigationLink 的新结构具有我用于NavigationLink 的目标视图的参数。

我发现这个链接让我走了大部分路，但我似乎无法在最后一英里找到它。

How to pass one SwiftUI View as a variable to another View struct

这是我制作的可重复使用的 NavigationLink 结构：

struct MainMenuButtonView<Content: View>: View {
    
    var imageName: String
    var title: String
    var description: String
    var content: Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack {
            NavigationLink(destination: content) {
                Image(imageName)
                    .resizable()
                    .frame(width: 100, height: 100)
                Text(title)
                    .font(.title)
                Text(description)
                    .foregroundColor(Color(UIColor.systemGray2))
                    .multilineTextAlignment(.center)
                    .font(.footnote)
                    .frame(width: 175)
            }
            .buttonStyle(PlainButtonStyle())
        }
    }
}

我目前在该部分没有收到任何错误，但这并不意味着它没有任何问题。

这里是我使用它的地方，目前，我只展示了一个，但一旦我开始使用它，我会拥有更多。

struct MainMenuView: View {
    
    var body: some View {
        NavigationView {
            MainMenuButtonView(imageName: "List Icon",
                               title: "Lists",
                               description: "Auto generated shopping lists by store",
                               content: TestMainView(testText: "Lists"))
            }
            .buttonStyle(PlainButtonStyle())
            .navigationBarTitle(Text("Main Menu"))
        }
    }
}

当我把它留在上面时，它告诉我有一个额外的参数并且无法推断“联系”。 Xcode 确实提供了修复，但在我修复后它最终看起来像这样

MainMenuButtonView<Content: View>(imageName: "List Icon",

然后我收到一个错误，它无法在范围内找到“内容”。我知道我的问题与我上面链接的示例之间的主要区别是我传入的视图也有参数。我不确定我是否也应该将所有参数放在 .

内的标注中

感谢您提供的任何帮助。

Answer 1

您需要更正MainMenuButtonView中的init：

struct MainMenuButtonView<Content: View>: View {
    var imageName: String
    var title: String
    var description: String
    var content: () -> Content // change to closure

    // add all parameters in the init
    init(imageName: String, title: String, description: String, @ViewBuilder content: @escaping () -> Content) {
        self.imageName = imageName // assign all the parameters, not only `content`
        self.title = title
        self.description = description
        self.content = content
    }

    var body: some View {
        VStack {
            NavigationLink(destination: content()) { // use `content()`
                Image(imageName)
                    .resizable()
                    .frame(width: 100, height: 100)
                Text(title)
                    .font(.title)
                Text(description)
                    .foregroundColor(Color(UIColor.systemGray2))
                    .multilineTextAlignment(.center)
                    .font(.footnote)
                    .frame(width: 175)
            }
            .buttonStyle(PlainButtonStyle())
        }
    }
}

此外，您需要将 闭包 传递给 content 参数（正如您在 init 中指出的那样）：

struct MainMenuView: View {
    var body: some View {
        NavigationView {
            MainMenuButtonView(
                imageName: "List Icon",
                title: "Lists",
                description: "Auto generated shopping lists by store",
                content: { TestMainView(testText: "Lists") } // pass as a closure
            )
            .navigationBarTitle(Text("Main Menu"))
        }
    }
}