SwiftUI-如何使用导航

在 SwiftUI 中，导航（Navigation）是指在不同视图之间的转场和层级关系的管理。

SwiftUI 提供了多种方法来实现导航，允许你创建具有层级结构的用户界面。

以下是 SwiftUI 中导航的基本概念和使用方法：

NavigationView

NavigationView 是 SwiftUI 中进行导航的容器视图。

它提供了一个导航栈，用于管理子视图的层级结构。

基本用法

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
                .navigationTitle("Home")
            }
        }
    }

}

struct DetailView: View {
    var body: some View {
        Text("This is the Detail View")
            .navigationTitle("Detail")
    }
} 

• NavigationView：包裹整个视图层次结构，以启用导航功能。
• NavigationLink：创建一个可以点击的链接，导航到目标视图。destination 参数指定导航到的视图。
• .navigationTitle(_:)：设置导航栏标题。

NavigationLink

NavigationLink 是用于在视图之间进行导航的控件。它可以放置在 NavigationView 内部，并允许用户点击以转到另一个视图。

基本用法

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
                NavigationLink(destination: AnotherView()) {
                    Text("Go to Another View")
                }
            }
            .navigationTitle("Home")
        }
    }
} 

NavigationStack (iOS 16+)

在 iOS 16 及更高版本中，NavigationStack 被引入作为 NavigationView 的更新版。它提供了更灵活的导航功能和对导航路径的更细粒度控制。

基本用法

import SwiftUI

struct ContentView: View {
    @State private var path = NavigationPath()
    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                NavigationLink("Go to Detail View", value: "DetailView")
                NavigationLink("Go to Another View", value: "AnotherView")
            }
            .navigationDestination(for: String.self) { value in
                if value == "DetailView" {
                    DetailView()
                } else if value == "AnotherView" {
                    AnotherView()
                }
            }
        }
    }
}

• NavigationStack：提供新的导航管理方式。path 用于管理导航路径。
• .navigationDestination(for:_:)：定义目标视图的导航规则。

Programmatic Navigation

在某些情况下，你可能希望通过代码控制导航，而不是依赖用户点击。

例如，可以使用 NavigationLink 的 isActive 绑定进行编程式导航。

基本用法

struct ContentView: View {
    @State private var isDetailViewActive = false
    var body: some View {
        NavigationView {
            VStack {
                Button("Go to Detail View") {
                    isDetailViewActive = true
                }
                NavigationLink(destination: DetailView(), 
isActive: $isDetailViewActive) {
                    EmptyView()
                }
            }
            .navigationTitle("Home")
        }
    }
}

• isActive：绑定状态，用于控制 NavigationLink 是否激活。

Back Navigation

用户可以通过导航栏上的返回按钮进行返回操作，但你也可以编程式地控制返回。

编程式返回

struct DetailView: View {
    @Environment(\.dismiss) var dismiss
    var body: some View {
        VStack {
            Text("This is the Detail View")
            Button("Go Back") {
                dismiss()
            }
        }
        .navigationTitle("Detail")
    }
}

@Environment(.dismiss)：获取环境中的 dismiss 变量，用于关闭当前视图。

小结：

SwiftUI提供了多种导航方法，包括：

• NavigationView：用于启用导航功能的容器视图。
• NavigationLink：用于在视图之间创建可点击的导航链接。
• NavigationStack：iOS 16+中的新导航管理方式，提供更灵活的导航控制。
• 程序式导航：通过状态绑定控制视图的显示。
• 返回操作：使用@Environment(.dismiss)来编程式地关闭视图。

这些导航功能使得在SwiftUI中创建复杂的视图层级和用户流变得简单直观。