SwiftUI- 导航

SwiftUI 导航是指 SwiftUI 中可用的工具和方法，用于管理应用程序内不同视图之间的导航。它允许开发人员创建分层界面，用户可以轻松地从一个屏幕(视图)移动到另一个屏幕(视图)，通常使用导航栏、后退按钮和基于堆栈的系统。

SwiftUI 提供了几个组件，以声明的方式方便导航。

导航的关键组件

以下是 SwiftUI 中常用的主要组件:

• NavigationView

• NavigationLink

• NavigationStack

• NavigationBar

NavigationView

NavigationView 是 SwiftUI 中的容器视图，允许您创建基于导航的界面，用户可以在其中从一个屏幕(视图)移动到另一个屏幕(视图)。它自动提供导航栏的功能，您可以在其中显示标题、按钮和其他控件，并且还可以实现分层导航。

示例

以下 SwiftUI 程序用于 navigationView。

import SwiftUI
struct ContentView: View {
   var body: some View {
      // 将内容包装在 NavigationView 中
      NavigationView {
         VStack {
            Text("Home Screen").font(.largeTitle).padding()

            // NavigationLink 导航至下一个屏幕
            NavigationLink(destination: DetailView()) {
               Text("Go to Detail Screen")
                  .padding()
                  .background(Color.blue)
                  .foregroundColor(.white)
                  .cornerRadius(10)
            }.padding()
         }.navigationTitle("Home")  
      }
   }
}

输出

NavigationLink

NavigationLink 是 SwiftUI 中的关键元素，可在 NavigationView(或 iOS 16 及以上版本中的 NavigationStack)内的视图之间导航。它会在界面中创建一个可点击区域，激活后会触发到另一个视图的转换。

示例

以下 SwiftUI 程序用于 navigationLink。

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationView {
         VStack {
            Text("Home Screen").font(.largeTitle).padding()

            // NavigationLink 导航至下一个屏幕
            NavigationLink(destination: DetailView()) {
               Text("Go to Detail Screen")
                  .padding()
                  .background(Color.blue)
                  .foregroundColor(.white)
                  .cornerRadius(10)
            }.padding()
         }.navigationTitle("Home")  
      }
   }
}

输出

NavigationStack

NavigationStack 是 iOS 16 中引入的新导航容器，用于替代 NavigationView，以更灵活、更高效的方式管理导航。它提供了一种更现代、更强大的方法来处理导航，尤其是在处理动态数据或复杂导航模式时。

示例

以下 SwiftUI 程序用于 navigationStack。

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationStack {
         VStack {
            Text("Home Screen")
               .font(.largeTitle)
               .padding()

            // NavigationLink 导航至下一个屏幕
            NavigationLink("Go to Detail Screen", value: "Hello from Home Screen")
               .padding()
               .background(Color.blue)
               .foregroundColor(.white)
               .cornerRadius(10)
         }.navigationTitle("Home")  // 设置主屏幕的导航标题
      }
   }
}

输出

NavigationBar

SwiftUI 中的导航栏是指通常出现在 NavigationView 或 NavigationStack 中屏幕顶部的栏，您可以在其中显示当前屏幕的标题并添加按钮或操作。

这是基于导航的应用中的关键 UI 组件，可帮助用户了解他们在应用中的位置，并提供导航和操作控件(如返回、保存等)。

示例

以下 SwiftUI 程序用于 navigationBar。

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationView {
         VStack {
            Text("Welcome to the Home Screen")
               .font(.largeTitle)
               .padding()

            NavigationLink("Go to Detail Screen", destination: DetailView())
               .padding()
               .background(Color.blue)
               .foregroundColor(.white)
               .cornerRadius(10)
         }.navigationTitle("Home")  // 设置导航栏的标题
      }
   }
}
struct DetailView: View {
   var body: some View {
      VStack {
         Text("Detail Screen")
            .font(.largeTitle)
            .padding()
      }.navigationTitle("Detail")  // 为详细信息屏幕设置不同的标题
   }
}
@main
struct MyApp: App {
   var body: some Scene {
      WindowGroup {
         ContentView()
      }
   }
}

输出