通过NavigationLink跳转页面

通过 NavigationLink 跳转页面，让你的 SwiftUI 应用更上一层楼！🚀 这是一个超棒的功能，能让你轻松实现页面间的无缝切换。准备好了吗？让我们一起探索吧！

基础用法

NavigationLink 的核心作用就是连接两个不同的视图。你可以把它想象成一个传送门，点击一下，就能瞬间到达另一个世界！✨

swift

NavigationLink("点击跳转到详情页") {
    DetailView()
}

这段代码创建了一个按钮，上面显示 "点击跳转到详情页"。当你点击它时，就会导航到 DetailView。是不是很简单？

NavigationLink 接受一个字符串作为按钮的标题。
花括号 {} 里面是目标视图，也就是你想要跳转到的页面。

传递数据

有时候，你需要在跳转页面的时候传递一些数据。NavigationLink 也能做到！你可以使用 NavigationLink 的 value 参数来实现。

swift

struct ContentView: View {
    let item = "SwiftUI 教程"

    var body: some View {
        NavigationStack {
            NavigationLink(value: item) {
                Text("跳转到详情页")
            }
            .navigationDestination(for: String.self) { value in
                DetailView(data: value)
            }
        }
    }
}

struct DetailView: View {
    let data: String

    var body: some View {
        Text("你传递的数据是：\(data)")
    }
}

在这个例子中，我们创建了一个 item 变量，并将其传递给 DetailView。在 DetailView 中，我们可以使用 data 变量来显示传递过来的数据。

使用 NavigationStack 包裹 NavigationLink。
使用 .navigationDestination(for: String.self) 来指定目标视图和接收的数据类型。
在 DetailView 中，声明一个 data 变量来接收传递过来的数据。

自定义样式

如果你不喜欢默认的按钮样式，可以自定义 NavigationLink 的外观。你可以使用 label 参数来创建一个自定义的视图作为按钮。🎨

swift

NavigationLink {
    DetailView()
} label: {
    HStack {
        Image(systemName: "arrow.right.circle.fill")
            .font(.largeTitle)
        Text("自定义跳转按钮")
    }
}

这段代码创建了一个带有图标和文字的自定义按钮。你可以根据自己的喜好来设计按钮的样式。

label 参数允许你使用任何 SwiftUI 视图作为按钮。
你可以使用 HStack、VStack 等布局容器来组合不同的视图元素。

总结

NavigationLink 是 SwiftUI 中非常强大的导航工具。通过它，你可以轻松实现页面间的跳转，传递数据，以及自定义按钮样式。掌握了 NavigationLink，你的应用将会更加流畅和美观！🎉 记住，实践是最好的老师，多尝试不同的用法，你一定会成为 SwiftUI 大师！💪

通过NavigationLink跳转页面 ​

基础用法 ​

传递数据 ​

自定义样式 ​

总结 ​

通过NavigationLink跳转页面

基础用法

传递数据

自定义样式

总结