Published 2023-08-27

Swift - 在 SwiftUI 中添加路由

当构建具有多个视图的应用程序时,有一种在它们之间导航的方法是很重要的。在 SwiftUI 中,NavigationStack 提供了一种在视图之间导航的简单而直观的方法。

要将 NavigationStack 添加到 SwiftUI 应用程序中,请将顶级视图封装在 NavigationStack 中。在 NavigationStack 中,可以添加多个视图作为导航项。每个导航项都表示为导航栏上的一个按钮,用户可以点击该按钮导航到该视图。

struct ContentView: View {
  var body: some View {
    NavigationStack {
      Text("Welcome to my app!")
        .navigationTitle("Home")
        .navigationBarTitleDisplayMode(.large)
    }
  }
}

在上面的代码中,我们将 Text 视图包装在 NavigationStack 中。这意味着 Text 视图将成为导航栏中的一个按钮。当用户点击该按钮时,将导航到 Text 视图。

Zqo6ZC

struct ContentView: View {
  var body: some View {
    NavigationStack {
      VStack {
        Text("Welcome to my app!")
        NavigationLink(destination: DetailView()) {
          Text("Go to Detail View")
        }
      }
      .navigationTitle("Home")
      .navigationBarTitleDisplayMode(.large)
      .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
          Button(action: {
            print("Settings tapped")
          }) {
            Text("Settings")
          }
        }
      }
    }
  }
}

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

在上面的代码中,我们添加了一个 NavigationLink,该链接将导航到 DetailView。我们还添加了一个 Settings 按钮,该按钮将在导航栏中显示。当用户点击该按钮时,将打印一条消息。

6GaNdH