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

Posted 2023-02-24

【中文标题】SwiftUI NavigationView 与 List 内 ForEach 中的 NavigationLink 来回跳转

【英文标题】：SwiftUI NavigationView jumps back and forth with NavigationLink in ForEach inside List

【发布时间】：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()
    

【参考方案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。