SwiftUI NavigationView 与 List 内 ForEach 中的 NavigationLink 来回跳转答案

【问题标题】：SwiftUI NavigationView jumps back and forth with NavigationLink in ForEach inside ListSwiftUI NavigationView 与 List 内 ForEach 中的 NavigationLink 来回跳转
【发布时间】：2020-09-22 00:52:03
【问题描述】：

我正在尝试在 NavigationView 的列表的每一行中包含导航链接的动态列表。但是，每当我点击其中一个链接时，导航都会来回跳转几次。

是什么导致来回导航？是否可以用 SwiftUI 以其他方式表达这种模式以避免这个问题？

import SwiftUI

struct MonthData: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    var tasks: [TaskData]
}

struct TaskData: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
}

let months: [MonthData] = [
    MonthData(id: 1, name: "January", tasks: []),
    MonthData(id: 2, name: "February", tasks: [
        TaskData(id: 21, name: "Do something"),
        TaskData(id: 22, name: "Do something else")
    ])
]

struct FooView: View {
    var body: some View {
        NavigationView {
            List(months) { month in
                VStack {
                    ForEach(month.tasks) { task in
                         NavigationLink(
                            destination: Text(task.name)
                       ) {
                           Text(task.name)
                       }
                    }
                }
            }
            .navigationBarTitle(Text("Months"))
        }
    }
}

struct FooView_Previews: PreviewProvider {
    static var previews: some View {
        FooView()
    }
}

【问题讨论】：

标签： ios swiftui

【解决方案1】：

它来回移动，因为在您的一月份示例中，单元格上没有链接，因为一月份没有任务。另一方面，二月份有两个导航链接（每个任务一个），这就是它进出的原因。您需要首先考虑您的布局和导航。但最终您需要为每个单元格添加一项，有些单元格可能会导航，有些可能不取决于您的逻辑。但是每个列表项最多应该有一个导航链接。这篇文章可能会有所帮助：SwiftUI - nested list

【讨论】：

一月没有链接，二月没有两个链接是我想要完成的核心事情（嗯 - 每行链接的动态数量）。为什么这会导致它进出？为什么每个列表项最多只能有一个导航链接？链接的帖子似乎没有解决嵌套导航项。

【解决方案2】：

这是固定的变体。使用 Xcode 12 / iOS 14 测试。

struct FooView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(months) { month in
                    Section {
                        ForEach(month.tasks) { task in
                            NavigationLink(
                                destination: Text(task.name)
                            ) {
                                Text(task.name)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle(Text("Months"))
        }
    }
}

【讨论】：

这个也有来回跳转的问题。它也只是水平而不是垂直布置NavigationLinks。