SwiftUI:导航在包含节的列表中不能正常工作

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架，用于构建 macOS、iOS、watchOS 和 tvOS 应用程序。它允许开发者通过描述 UI 的外观和行为来构建界面，而不是通过编写大量的代码。

在 SwiftUI 中，导航是通过 NavigationView 和 NavigationLink 来实现的。NavigationView 提供了一个容器，可以在其中嵌套多个视图，并通过 NavigationLink 来实现视图之间的导航。

问题描述

在包含节的列表（例如 List 中嵌套 Section）中，导航可能无法正常工作。这通常是由于 NavigationLink 的使用不当或布局问题导致的。

原因

NavigationLink 的使用不当：NavigationLink 必须直接嵌套在 List 或 Section 内部，而不是嵌套在其他视图中。
布局问题：如果 NavigationLink 被包裹在其他视图中，可能会导致其无法正确识别点击事件。

解决方法

以下是一个示例代码，展示了如何在包含节的列表中正确使用 NavigationLink：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section 1")) {
                    NavigationLink(destination: DetailView(text: "Detail 1")) {
                        Text("Item 1")
                    }
                    NavigationLink(destination: DetailView(text: "Detail 2")) {
                        Text("Item 2")
                    }
                }
                
                Section(header: Text("Section 2")) {
                    NavigationLink(destination: DetailView(text: "Detail 3")) {
                        Text("Item 3")
                    }
                    NavigationLink(destination: DetailView(text: "Detail 4")) {
                        Text("Item 4")
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Navigation Demo")
        }
    }
}

struct DetailView: View {
    let text: String
    
    var body: some View {
        Text(text)
            .padding()
            .navigationTitle("Detail")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解释

NavigationView：作为最外层的容器，提供导航功能。
List：用于显示列表数据。
Section：用于将列表项分组，并提供标题。
NavigationLink：用于实现视图之间的导航。destination 参数指定了目标视图，而 NavigationLink 的内容则是显示在列表中的文本。