SwiftUI：页面跳转和导航设置（看这篇就够了）

1、导航跳转

• 页面A

import SwiftUI

struct ContentViewA: View {
    
    @State var isNavPush = false
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(isActive: $isNavPush) {
                    NavPushViewB()
                } label: {
                }

                Button {
                    isNavPush = true
                } label: {
                    Text("导航跳转")
                }
            }.navigationTitle("页面A")
            .padding()
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewA()
    }
}

• 页面B

import SwiftUI

struct NavPushViewB: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct NavPushView_Previews: PreviewProvider {
    static var previews: some View {
        NavPushViewB()
    }
}

来看下效果：

1.gif

2、导航设置

//  以上一份代码的页面“NavPushViewB”为例，来设置导航

import SwiftUI

struct NavPushViewB: View {
    var body: some View {
        VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }.navigationTitle("页面B")
            .padding()
    }
}

struct NavPushView_Previews: PreviewProvider {
    static var previews: some View {
        NavPushViewB()
    }
}

这个时候展示效果如下：

2.jpg

效果不能满足正常的要求，那么就来对导航进行设置：

import SwiftUI

struct NavPushViewB: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        NavigationView {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }.navigationBarTitle("页面B", displayMode: .inline) //设置标题displayMode，默认的是：automatic（大标题）
            .navigationBarBackButtonHidden(true) //隐藏系统的导航返回按钮
            .navigationBarItems(leading: Button(action: { //自定义导航的返回按钮
                presentationMode.wrappedValue.dismiss() //返回上级页面
            }, label: {
                Image("nav_back_black") //导航返回按钮图标
            }))
            .padding()
        }
    }
}

struct NavPushView_Previews: PreviewProvider {
    static var previews: some View {
        NavPushViewB()
    }
}

展示效果如下：

3.jpg

如此导航的基本设置就处理好了，下面处理下另外一种方式的页面跳转：

3、Present跳转（模态跳转）

import SwiftUI

struct ContentViewA: View {
    
    @State var isNavPush = false
    @State var isPresent = false
    
    var body: some View {
        NavigationView {
            VStack {
                
                NavigationLink(isActive: $isNavPush) {
                    NavPushViewB()
                } label: {
                    
                }
                
                
                Button {
                    isNavPush = true
                } label: {
                    Text("导航跳转")
                }.padding(.bottom, 30)
                
                
                Button {
                    isPresent = true
                } label: {
                    Text("Present跳转")
                }
                
                
            }.navigationTitle("页面A")
                .sheet(isPresented: $isPresent, content: {// 模态跳转（未满屏）
                    PresentB()
                })
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentViewA()
    }
}

效果如下：

4.gif

• 跳转页面全屏展示

// 只需要将上面的 “ sheet”替换成“ fullScreenCover”的方式就可以了
.fullScreenCover(isPresented: $isPresent, content: {
      PresentB()
  })

效果如下：

5.gif

• 如果需要再模态跳转的“PresentB”页面加导航，直接加即可：

import SwiftUI

struct PresentB: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        NavigationView {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
            }.navigationBarTitle("PresentB", displayMode: .inline) //设置标题displayMode，默认的是：automatic（大标题）
                .navigationBarBackButtonHidden(true) //隐藏系统的导航返回按钮
                .navigationBarItems(leading: Button(action: { //自定义导航的返回按钮
                    presentationMode.wrappedValue.dismiss() //返回上级页面
                }, label: {
                    Image("nav_back_black") //导航返回按钮图标
                }))
                .padding()
        }
    }
}

struct PresentB_Previews: PreviewProvider {
    static var previews: some View {
        PresentB()
    }
}

效果如下：

6.gif

以上就是常用的两种页面跳转和导航栏的设置了，在常规项目的开发中，我们会遇到两个问题：

1、下导航tabbar所持有的页面（比如：“我的”页面）跳转到其他页面（比如：“个人资料”页面）的时候，下导航tabbar未隐藏（“个人资料”页面依然展示这下导航tabbar）的问题。
答：将NavigationView套在tabbar外层即可。
2、跳转页面后如何返回到指定的页面？（如：A->B->C->D，如何在D页面直接返回到B页面？或者返回到A页面？）
SwiftUI：导航返回到指定页面