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

Question

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

我发现这个链接帮了我大部分忙，但我似乎无法完成最后一英里。

如何将一个 SwiftUI View 作为变量传递给另一个 View 结构

这是我制作的可重用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"))
        }
    }
}

当我将其保留为上面时，它告诉我有一个额外的参数，并且无法推断“Contect”。Xcode 确实提供了修复，修复后它看起来像这样

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

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

感谢您提供的任何帮助。

Answer 1

您需要更正init以下内容MainMenuButtonView：

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"))
        }
    }
}