12.导航视图

导航视图是 SwiftUI 中非常重要的一个组件，它可以用于管理应用程序中的多个视图。

导航视图的基础

在 SwiftUI 中，导航视图可以通过 NavigationView 和 NavigationLink 两个组件来实现。其中，NavigationView 用于包含和管理多个视图，而 NavigationLink 用于在不同的视图之间进行切换。

NavigationView

NavigationView 是一个容器视图，它可以包含多个视图，并将这些视图按照导航栏和工具栏的形式进行显示。当用户选择导航栏中的某个项目时，NavigationView 会自动将对应的视图进行显示。

下面是一个简单的例子，演示了如何使用 NavigationView 和 List 创建一个简单的列表视图：

NavigationView {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    .navigationBarTitle(Text("My List"))
}

使用 List 创建了一个简单的列表视图，并使用 NavigationView 包含了这个列表视图。还使用 navigationBarTitle 方法来设置导航栏的标题。

NavigationLink

NavigationLink 是一个视图，它可以用于在不同的视图之间进行切换。当用户点击 NavigationLink 时，导航视图会自动显示目标视图。

下面是一个简单的例子，演示了如何使用 NavigationLink 在两个视图之间进行切换：

NavigationView {
    List {
        NavigationLink(destination: Text("Detail View")) {
            Text("Item 1")
        }
        NavigationLink(destination: Text("Detail View")) {
            Text("Item 2")
        }
        NavigationLink(destination: Text("Detail View")) {
            Text("Item 3")
        }
    }
    .navigationBarTitle(Text("My List"))
}

使用 NavigationLink 在列表视图中添加了三个链接。当用户点击其中任意一个链接时，导航视图会自动显示名为 "Detail View" 的目标视图。

导航视图的高级用法

除了基本用法之外，SwiftUI 的导航视图还支持许多高级用法。例如，我们可以使用 navigationBarItems 方法来在导航栏中添加自定义项目，使用 presentationMode 属性来控制视图的显示方式，使用 isActive 属性来控制 NavigationLink 的显示方式等等。

下面是一个简单的例子，演示了如何使用 navigationBarItems 方法在导航栏中添加自定义项目：

NavigationView {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    .navigationBarTitle(Text("My List"))
    .navigationBarItems(trailing:
        Button(action:  {
            print("Button Tapped")
        }
    ) {
        Image(systemName: "plus")
    }
}

在这个例子中使用 navigationBarItems 方法在导航栏的右侧添加了一个加号按钮。当用户点击该按钮时，会触发 print 语句并打印一条消息。

另外还可以使用 presentationMode 属性来控制视图的显示方式。这个属性是一个环境变量，可以用于获取和设置当前视图的呈现模式。例如可以使用 presentationMode 属性来在视图中添加一个 "Dismiss" 按钮，并在用户点击该按钮时关闭当前视图：

struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("Detail View")
            
            Button("Dismiss") {
                self.presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

NavigationView {
    List {
        NavigationLink(destination: DetailView()) {
            Text("Item 1")
        }
        NavigationLink(destination: DetailView()) {
            Text("Item 2")
        }
        NavigationLink(destination: DetailView()) {
            Text("Item 3")
        }
    }
    .navigationBarTitle(Text("My List"))
}

在这个例子中使用 presentationMode 属性获取了当前视图的呈现模式，并在 DetailView 视图中添加了一个 "Dismiss" 按钮。当用户点击该按钮时，会调用 presentationMode.wrappedValue.dismiss() 方法来关闭当前视图。

除了 presentationMode 属性之外，还可以使用 isActive 属性来控制 NavigationLink 的显示方式。例如可以使用 isActive 属性来在视图中添加一个 "Toggle" 按钮，并在用户点击该按钮时切换 NavigationLink 的状态：

struct ContentView: View {
    @State private var isActive = false
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Detail View"), isActive: $isActive) {
                    EmptyView()
                }
                
                Button("Toggle") {
                    self.isActive.toggle()
                }
            }
            .navigationBarTitle(Text("My View"))
        }
    }
}

在这个例子中使用 isActive 属性来控制 NavigationLink 的显示方式，并在 ContentView 视图中添加了一个 "Toggle" 按钮。当用户点击该按钮时，会调用 self.isActive.toggle() 方法来切换 NavigationLink 的状态。

总结

本文介绍了 SwiftUI 中的导航视图，包括 NavigationView 和 NavigationLink 两个组件的基本用法和高级用法。还演示了如何在导航栏中添加自定义项目，如何使用 presentationMode 属性来控制视图的显示方式，以及如何使用 isActive 属性来控制 NavigationLink 的显示方式。