SwiftUI MVVM协调器/路由器/导航链接

Question

我在将UIKit架构模式转换为SwiftUI时遇到了问题。我当前的模式主要是带有协调器/路由器的MVVM。MVVM部分似乎相当容易和自然，添加了@observableobject/@published。但是协调/路由似乎并不直观。视图和协调（导航）功能在SwifTUI中紧密耦合。除了使用帮助器结构 之外，似乎不可能将它们分开。

这里有一个例子:我想在SwiftUI中创建一个可重用的row/cell。假设生产中的这一行非常复杂，因此我想重用它。我想把它也放在另一个模块中，这样我就可以在多个目标中重用它。（如iOS，macCatalyst等）

现在我想控制当用户点击那个视图或那个视图中的按钮时会发生什么。根据上下文，我需要导航到不同的目的地。就我所知，可能的NavigationLink目标必须硬连接到视图中，或者必须将 传递到视图中。

这里有一些示例代码。此单元格/行包含两个按钮。我希望导航到其他视图，这些视图依赖于上下文，而不是硬连接到代码中:

struct ProductFamilyRow: View {
    @State private var selection: Int? = 0
    let item: ProductFamilyItem

    let destinationView1: AnyView
    let destinationView2: AnyView

    var body: some View {
        VStack {
            NavigationLink(
                destination: destinationView1,
                tag: 1,
                selection: self.$selection
            ) {
                EmptyView()
            }

            NavigationLink(
                destination: destinationView2,
                tag: 2,
                selection: self.$selection
            ) {
                EmptyView()
            }

            HStack {
                Text(item.title)
                Button("Destination 1") {
                    self.selecthtml" target="_blank">ion = 1
                }.foregroundColor(Color.blue)

                Button("Destination 2") {
                    self.selection = 2
                }.foregroundColor(Color.blue)
            }

            //Image(item.image)
        }.buttonStyle(PlainButtonStyle())
    }
}

这似乎是SwiftUI的一大设计缺陷。除了使用 hack之外，带有导航链接的可重用组件基本上是不可能的。据我所知， 只用于需要type-erasure的特定用例，并且有相当多的性能缺陷。因此，我认为这不是使用SwiftUI创建可重用，可导航视图的惯用解决方案。

这真的是唯一的解决办法吗？也许我完全错了，这是一个错误的方向。我在什么地方读过（再也找不到邮报了）关于使用一些中央状态来指示显示哪个视图，但是我没有看到具体的例子。

第二个挑战:我也不希望细胞对任何其他的点击，然后对按钮作出反应。但似乎不可能控制细胞的定位。（因此不是点击其中一个按钮，而是在单元格中的任何地方）在当前示例代码中，它（出于任何原因）导航到“destination 2”。

提前谢谢你。

Answer 1

最好为您的行使用泛型，如下所示（用Xcode11.4测试）

用法示例:

ProductFamilyRow(item: ProductFamilyItem(title: "Test"),
    destinationView1: { Text("Details1") },
    destinationView2: { Text("Details2") })

接口:

为行突出显示添加更新的块。列表具有自动检测行内按钮或链接的功能，如果存在任何标准（键），则突出显示。因此，要禁用这种行为，它需要隐藏自定义按钮样式下的所有内容。

struct ProductFamilyRowStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .colorMultiply(configuration.isPressed ? 
                 Color.white.opacity(0.5) : Color.white) // any effect you want
    }
}

struct ProductFamilyRow<D1: View, D2: View>: View {
    let item: ProductFamilyItem
    let destinationView1: () -> D1
    let destinationView2: () -> D2

    init(item: ProductFamilyItem, @ViewBuilder destinationView1: @escaping () -> D1,
        @ViewBuilder destinationView2: @escaping () -> D2)
    {
        self.item = item
        self.destinationView1 = destinationView1
        self.destinationView2 = destinationView2
    }

    @State private var selection: Int? = 0

    var body: some View {
        VStack {
            HStack {
                Text(item.title)
                Button(action: {
                    self.selection = 1
                }) {
                    Text("Destination 1")
                        .background( // hide link inside button !!
                            NavigationLink(destination: destinationView1(),
                                tag: 1, selection: self.$selection) { EmptyView() }
                        )
                }.foregroundColor(Color.blue)

                Button(action: {
                    self.selection = 2
                }) {
                    Text("Destination 2")
                        .background(
                            NavigationLink(destination: destinationView2(),
                                tag: 2, selection: self.$selection) { EmptyView() }
                        )
                }.foregroundColor(Color.blue)
            }

            //Image(item.image)
        }.frame(maxWidth: .infinity) // to have container centered
        .buttonStyle(ProductFamilyRowStyle())
    }
}