SwiftUI 如何实现路由逻辑?

25 min read

在SwiftUI中,可以使用 NavigationViewNavigationLink 来实现路由逻辑。以下是一个基本的路由示例:

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

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .navigationBarTitle("Detail")
    }
}

在这个示例中, ContentView 是应用的主视图,在 NavigationView 下包含一个 Text,并使用 NavigationLink 作为按钮来导航到 DetailView。在 DetailView 中,我们只是显示了一段文本,然后设置了标题。

这样,当点击 "Go to Detail" 按钮时,应用程序将导航到 DetailView,并在导航栏上显示 "Detail" 标题。

使用 NavigationLink 还可以通过 isActive 绑定来实现条件导航。例如,你可以创建一个 @State 属性来控制导航链接的可见性,然后根据需要更新该状态来触发导航逻辑。

struct ContentView: View {
    @State private var showDetail = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button("Go to Detail") {
                    self.showDetail = true
                }
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding()
                
                NavigationLink(destination: DetailView(),
                               isActive: $showDetail) {
                    EmptyView()
                }
                .hidden()
            }
            .navigationBarTitle("Home")
        }
    }
}

在这种情况下,我们创建了一个布尔类型的 showDetail 属性,并在按钮的动作中将其设置为 true,来显示 NavigationView 下的 NavigationLink。+ath和-结束辅助