SwiftUI：NavigationLink 在列表中始终处于激活状态

Question

我无法阻止SwiftUI的NavigationLink在List中被激活，我有一段简单的代码，在决定是否显示详细信息页面之前我需要进行某种业务检查（在真实世界的应用程序中，按钮的操作中可能会发生一些业务逻辑）：

struct ContentView: View {
    @State var showDetail = false
    var body: some View {
        NavigationView {
            List {
                Text("Text 1")
                Text("Text 2")
                Text("Text 3")
                NavigationLink(destination: DetailView(), isActive: $showDetail) {
                    LinkView(showDetails: $showDetail)

                }
            }
        }
    }
}

struct LinkView: View {
    @Binding var showDetails: Bool

    var body: some View {
        Button(action: {
            self.showDetails = false
        }) {
            Text("Open Details")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
    }
}

在这种情况下，如何防止导航链接打开详细信息页面？ 这是 SDK 中的错误吗？

ps XCode 版本： 13.3.1和 iOS 版本（真实设备）： 13.3.1

编辑

我无法用ScrollView替换 List 因为我的真实应用程序中有一个ForEach项目列表，所以不要发布考虑使用ScrollView的答案。

Answer 1

在现实世界的应用程序中，按钮的操作中可能会发生一些业务逻辑

似乎有点不合逻辑。您可以简单地有条件地禁用链接（并通过视觉外观通知用户该链接不可用）

NavigationLink(...).disabled(onCondition)

在哪里

func disabled(_ disabled: Bool) -> some View

参数

残疾

一个布尔值，用于确定用户是否可以与此视图交互。

返回值

控制用户是否可以与此视图交互的视图。

讨论

视图层次结构中较高的视图可以覆盖您在此视图上设置的值。 在下面的例子中，按钮不是交互式的，因为外部的 disabled(_:) 修饰符覆盖了内部的：

HStack {
    Button(Text("Press")) {}
    .disabled(false)
}
.disabled(true)

Answer 2

如果我正确理解你的目标，它可以如下

List {
    Text("Text 1")
    Text("Text 2")
    Text("Text 3")
    LinkView(showDetails: $showDetail)
        .background(
            NavigationLink(destination: DetailView(), isActive: $showDetail) { EmptyView() })
}

和

struct LinkView: View {
    @Binding var showDetails: Bool

    var body: some View {
        Button(action: {
            self.showDetails = true // < activate by some logic
        }) {
            Text("Open Details")
        }
    }
}

Answer 3

如果您使用.disable(true)，它将像禁用按钮一样降低您的列表项不透明度，以防止这种情况发生。 使用下面的代码风格。 在背景中使用导航链接并在视图的点击手势上检查您的导航条件。

VStack{
        List(0..<yourListArray.count, id: \.self) { index in  

        {
            Text("\(yourListArr[index].firstName)")
        }().onTapGesture{
            let jobType = getFlags(jobsArr: yourListArray, index:index) 
           if jobType.isCancelledFlag == true{
               self.shouldNavigate = false
           }else{
               self.shouldNavigate = true
           }
        }//Tap Gesture End
        .background(NavigationLink(destination: YourDestinationView(),isActive: self.$shouldNavigate) {
         }.hidden())}}//vStack