SwiftUI导航控制器卡顿,每个列表行有两个导航链接

时间:2020-08-09 04:51:02

标签: swiftui swiftui-list swiftui-navigationlink ios-navigationview swiftui-foreach

我正在尝试在重复列表中创建两个NavigationLink。每个都有一个单独的目的地。在我将对根视图的调用嵌入到List / ForEach循环中之前,代码都可以正常工作。此时导航变得非常奇怪。

尝试单击任一链接,然后单击顶部的后退指示器。它将转到一个NavigationLink,然后转到另一个。有时以不同的顺序,有时它会从链接之一自动返回,有时,直到您从第一个细节视图返回后,它才会打开第二个细节视图。它既可以在预览版中进行,也可以在构建和运行应用程序时进行。

我将代码简化为以下最基本的代码。如果您按照ContentView中的指示注释了两行,那么您将看到正确的行为。

我正在运行Catalina 10.15.5,xCode 11.6,其应用程序目标为IOS 13.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")
        }
    }
}

1 个答案:

答案 0 :(得分: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()
        }
    }
}