[移动开发]SwiftUI——界面间的“闪转腾挪”

在开发过程中，我们经常需要在多个界面之间“闪转腾挪”，在SwiftUI有两种方法：

• NavigationView法：最常见的方法。每层之间都可以传递数据。由于是一层一层界面跳转，不过不适合几个界面之间跳转。
• 指定跳转法：可以几个界面之间跳转。不过问题在于界面数据不太方便传递，只适合“写定”的界面之间（使用时界面不能带参数）。

NavigationView 法：

这个方法使用Navigationlink来指定需要跳转到的界面，也是最常见的方法。使用起来有两种方法，不过这两种方法都需要包裹在NavigationView中：

直接把NavigationLink当按钮，点击跳转

NavigationLink(destination: <需要跳转到的界面>) { <跳转链接样式> }

这个太简单了，一般很少用。使用方法和按钮Button一样。

【推荐】用一个布尔值触发跳转

NavigationLink(destination: <需要跳转到的界面>, isActive: <用于激活跳转的一个布尔值>) { EmptyView() }

这种方法使用一个EmptyView()让其不显示在界面中，但是可以被触发，有时候需要使用ZStack压到最下面。
这种方法使用场景就多了，比如说达到一定条件可以跳转到某个界面。

比如下面这个点击按钮就可以跳转哦。

struct ContentView: View {
	//这个就是触发跳转的布尔值
    @State private var isShowingDetailView = false
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView(), isActive: $isShowingDetailView) { EmptyView() }
                Text("ViewA")
                    .padding()
                Button(action: {
                    isShowingDetailView = true
                }, label: {
                    Text("View B")
                })
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("ViewB")
            .padding()
    }
}

效果如下：

指定跳转法

这是一个方法，而不是苹果提供的。相比较前者稍微难一些，而且在数据传递的时候受限比较多，但是在界面比较多的某些时候就可能会比较好用。

假设现在有三个界面A、B和C。需要依次点击跳转。

首先针对三个界面新建一个枚举：

enum Views {
    case view1
    case view2
    case view3
}

然后新建新建一个可观察对象ViewRouter，来控制当前显示的界面：

class ViewRouter: ObservableObject {
    //当前界面发生变化的时候，将观察ViewRouter的视图，主界面要得到通知和更新————所以需要用@Published属性来wrap
    //@Published 属性包装器的工作原理与 @State 属性包装器非常相似。每次分配给包装的属性的值发生变化时，每个观察中视图都会重新渲染。
    @Published var currentView: Views = .view1
}

新建一个名为MainView的 View 作为主界面：

//主界面
struct MainView: View {
    //实例化结构体：有两种方法，看一下注释讲了区别
    //@StateObject属性用于将View绑定到ObservableObjects————如果层级复杂，就不够用了，需要使用@EnvironmentObject
//    @StateObject var viewRouter = ViewRouter()
    //EnvironmentObject是一个数据模型，一旦初始化，可用于在应用程序的所有视图中共享信息————是由可观察对象创建的
    //该方法不能引导有属性的结构体，因为属性变化就不能用了
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        //根据viewRouter的currentView属性来显示相应的View
        switch viewRouter.currentView {
        case .view1:
            ContentViewA()
        case .view2:
            ContentViewB()
        case .view3:
            ContentViewC()
        }
    }
}

这个方法其实就是通过使用switch语句来更改当前显示的 View，被更改的则是之前新建结构体ViewRouter中的currentView。结构体ViewRouter中的@Published var currentView: Views = .view1表示默认显示.view1。

然后列出三个界面的代码，这里需要在按钮上更改结构体ViewRouter中的currentView。

struct MainView: View {
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        //根据viewRouter的currentView属性来显示相应的View
        switch viewRouter.currentView {
        case .view1:
            ContentViewA()
        case .view2:
            ContentViewB()
        case .view3:
            ContentViewC()
        }
    }
}

//一级界面A
struct ContentViewA: View {
    @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        VStack {
            Text("ViewA")
                .padding()
            Button(action: {
                viewRouter.currentView = .view2
            }, label: {
                Text("Next B")
            })
        }
        .environmentObject(viewRouter)
    }
}

//二级界面B
struct ContentViewB: View {
    @EnvironmentObject var viewRouter: ViewRouter
    
    @State private var showingDetailView = false
    
    var body: some View {
        VStack {
            Text("ViewB")
                .padding()
            Button(action: {
                viewRouter.currentView = .view3
            }, label: {
                Text("Next C")
            })
        }
        .environmentObject(viewRouter)
    }
}

//三级界面C
struct ContentViewC: View {
    @EnvironmentObject var viewRouter: ViewRouter
    
    @State private var showingDetailView = false
    
    var body: some View {
        VStack {
            Text("ViewC")
                .padding()
        }
    }
}

然后在 Preview 的结构体，或者@main部分加上环境对象.environmentObject(ViewRouter())。如下：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
            .environmentObject(ViewRouter())
    }
}

或者：

@main
struct viewApp: App {
    var body: some Scene {
        WindowGroup {
            MainView()
                .environmentObject(ViewRouter())
        }
    }
}

效果如下：

希望可以帮到有需要的人～