SwiftUI，如果导航链接不可见，如何使其工作？

Question

当在 ForEach 之后在视图底部使用 NavigationLink 时，如果它不可见，它将无法工作。

我有一个按钮列表。如果按下按钮，则会将 Bool 设置为 true。该布尔值现在显示一个 NavigationLink，它会立即激活，因为传递的绑定设置为 true。但是，如果数组太长，链接将不起作用，因为一旦按下第一个按钮，链接就会消失。

这是我的代码：

import SwiftUI

struct TestLinkView: View {
    @State private var linkIsActive = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button(action: {
                    linkIsActive = true
                }) {
                    Text("Press")
                }
                
                NavigationLink(destination: ListView(linkIsActive: $linkIsActive), isActive: $linkIsActive) {
                    Text("Navigation Link")
                }
            }
        }
    }
}


struct ListView: View {
    
    var nameArray = ["Name1","Name2","Name3","Name4","Name5","Name6","Name7","Name8","Name9","Name10","Name11","Name12","Name13","Name14","Name15","Name16","Name17","Name18","Name19","Name20" ]
    @State private var showLink: Bool = false
    @State private var selectedName: String = ""
    @Binding var linkIsActive: Bool
    var body: some View {
        
        Form {
            ForEach(nameArray, id: \.self) { name in
                Button(action: {
                    selectedName = name
                    showLink = true
                }) {
                    Text(name)
                }
            }
            
            if showLink {
                NavigationLink(destination: NameView(selectedName: selectedName), isActive: $linkIsActive) {
                    EmptyView()
                }
            }
        }
        .navigationBarTitle("ListView")
    }
}

struct NameView: View {
    
    var selectedName: String
    
    var body: some View {
        Text(selectedName)
            .navigationBarTitle("NameView")
    }
}

可行的方法是在按钮标签内传递带有 if 条件的 NavigationLink。但是，如果我这样做，动画将不再起作用。

Answer 1

您不需要在表单中使用它，就像列表一样，不会在可见区域之外创建视图。在您的情况下，解决方案是将链接移动到表单的背景中（因为它不依赖于表单内部）。

以下测试适用于 Xcode 12 / iOS 14。

    Form {
        ForEach(nameArray, id: \.self) { name in
            Button(action: {
                selectedName = name
                showLink = true
            }) {
                Text(name)
            }
        }
    }
    .background(Group{
        if showLink {
            NavigationLink(destination: NameView(selectedName: selectedName), isActive: $linkIsActive) {
                EmptyView()
            }
        }
    })