SwiftUI导航视图控件NavigationLink

在 SwiftUI 中，NavigationLink 是用来导航到另一个视图的控件，通常在 NavigationStack 或 NavigationView 中使用。它是构建多层次导航界面的核心组件。

基本用法

1、使用默认导航标题

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Go to Detail View") {
                    DetailView()
                }
            }
            .navigationTitle("Home")
        }
    }
}

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

解释：

NavigationStack: 提供导航的层次结构。

NavigationLink: 创建一个导航项，点击后进入目标视图。

navigationTitle: 设置当前页面的标题。

2、自定义样式

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("Home")
        }
    }
}

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

解释：

可以自定义 NavigationLink 的外观，只需将按钮样式放在 NavigationLink 的闭包中。

3、动态列表中的导航

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationStack {
            List(items, id: \.self) { item in
                NavigationLink(item) {
                    DetailView(item: item)
                }
            }
            .navigationTitle("Items")
        }
    }
}

struct DetailView: View {
    let item: String

    var body: some View {
        Text("Detail for \(item)")
            .navigationTitle(item)
    }
}

解释：

通过循环动态生成多个 NavigationLink。

每个 NavigationLink 都导航到与之关联的目标视图。

4、隐藏返回按钮

在目标视图中，可以隐藏默认的返回按钮。

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

5、自定义返回按钮

可以完全自定义返回按钮的样式：

struct DetailView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        VStack {
            Button("Go Back") {
                dismiss()
            }
            .padding()
            .background(Color.red)
            .foregroundColor(.white)
            .cornerRadius(10)

            Text("This is the Detail View!")
        }
        .navigationTitle("Detail")
    }
}

解释：

使用 @Environment(\.dismiss) 提供的上下文方法可以手动返回上一页。

NavigationLink(value:)

NavigationLink(value:) 是一种更现代化的用法，它需要配合 navigationDestination(for:) 或类似的方式来定义目标视图。

注意：单独使用它无法触发跳转，因为它的设计依赖于 NavigationStack 或 NavigationSplitView 的声明式导航功能。

struct NewsFeedView: View {
    var body: some View {
        List(articles) { article in
            NavigationLink(value: article) {
                Text(article.title)
            }
        }
        .navigationDestination(for: Article.self) { article in
            ArticleDetailView(article: article)
        }
        .navigationDestination(for: Comment.self) { comment in
            CommentDetailView(comment: comment)
        }
    }
}

1、NavigationLink(value:) 的工作机制：

当 value 被设置时，它不会自动跳转。

它依赖 navigationDestination(for:) 显式声明导航规则，来匹配 value 类型并提供目标视图。

2、不配合 navigationDestination 使用时：

点击 NavigationLink 时，虽然会触发 value 的绑定变化，但因为没有导航规则，导航栈无法解析该 value 对应的目标视图。

具体细节可以了解《SwiftUI深入理解NavigationDestination和NavigationPath》

总结

NavigationLink 是 SwiftUI 中导航的核心组件。以下是其主要特点：

简单易用，支持静态和动态数据。

可以自定义外观。

支持程序化导航，便于实现复杂的逻辑。

提供强大的扩展选项，例如自定义返回按钮和隐藏导航栏。

相关文章

SwiftUI深入理解NavigationDestination和NavigationPath：https://fangjunyu.com/2024/10/11/%e6%96%87%e7%ab%a0%e4%bb%8b%e7%bb%8d/