SwiftUI导航控制器在每个列表行中使用两个导航链接口吃

Question

我试图在一个重复列表中创建两个NavigationLinks。每个人都有一个不同的目的地。代码都可以正常工作，直到我将对根视图的调用嵌入到List/ForEach循环中。这时导航变得非常奇怪。

尝试单击任一链接，然后单击顶部的后退指示器。它将转到一个NavigationLink，然后另一个。有时按不同的顺序，有时它会自动从其中一个链接返回，而另一些时候，它将不会打开第二个详细信息视图，直到您从第一个详细信息视图返回。它既可以在预览中实现，也可以在构建和运行应用程序时做到这一点。

我已经把代码浓缩到了下面最基本的部分。如果您按ContentView中指示的2行进行注释，那么您将看到正确的行为。

我正在运行Catalina10.15.5，xCode 11.6，其应用程序目标是IOS13.6。

如何修改代码，使其与List/ForEach循环一起工作？

import SwiftUI

struct DetailView1: View {
    var body: some View {
        HStack {
            Text("Here is Detail View 1." )}
            .foregroundColor(.green)
    }
}

struct DetailView2: View {
    var body: some View {
        HStack {
            Text( "Here is Detail View 2.") }
            .foregroundColor(.red)
    }
}

struct RootView: View {
    var body: some View {
        HStack {
            VStack {
                NavigationLink(destination: DetailView1())
                { VStack { Image(systemName: "ant.circle").resizable()
                    .frame(width:75, height:75)
                    .scaledToFit()
                }.buttonStyle(PlainButtonStyle())
                    Text("Tap for Detail 1.")
                        .foregroundColor(.green)
                }
            }
            NavigationLink(destination: DetailView2())
            { Text("Tap for Detail 2.")
                .foregroundColor(.red)
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            // Comment the following line for correct behavior
            List { ForEach(0..<3) {_ in
                RootView()
                // Comment the following line for correct behavior
                }  }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ContentView()
                .navigationBarTitle("Strange Behavior")
        }
    }
}

Answer 1

在您的情况下，这两个导航链接同时被激活用户点击一行，以避免这是可能的方法

用Xcode 12 / iOS 14测试

这个想法是通过编程方式激活一个链接，并根据单击哪个按钮动态地选择目标。

struct RootView: View {
    @State private var isFirst = false
    @State private var isActive = false
    var body: some View {
        HStack {
            VStack {
                Button(action: {
                    self.isFirst = true
                    self.isActive = true
                })
                { VStack { Image(systemName: "ant.circle").resizable()
                    .frame(width:75, height:75)
                    .scaledToFit()
                }
                    Text("Tap for Detail 1.")
                        .foregroundColor(.green)
                }
            }
            Button(action: {
                self.isFirst = false
                self.isActive = true
            })
            { Text("Tap for Detail 2.")
                .foregroundColor(.red)
            }
            .background(
                NavigationLink(destination: self.destination(), isActive: $isActive) { EmptyView() }
            )
        }
        .buttonStyle(PlainButtonStyle())
    }

    @ViewBuilder
    private func destination() -> some View {
        if isFirst {
            DetailView1()
        } else {
            DetailView2()
        }
    }
}