在 swiftUI 中将一个视图导航到另一个视图

Question

我有两个按钮，一个用于登录，另一个用于注册。当登录按钮为我时，我将重定向到登录视图，当我单击注册按钮时，我希望重定向到注册视图。它工作正常，但我面临一些问题。

1. 当我添加导航链接时，按钮高度重叠。
2. 当我使用按钮导航到其他视图时，单击后退按钮，覆盖层仍然可见。
3. 我收到此警告.. 'init(destination:isActive:label:)' 在 iOS 16.0 中已弃用：在 NavigationStack 或 NavigationSplitView 中使用 NavigationLink(value:label:)

这是代码..

import SwiftUI

struct ContentView: View {

    @State private var isPresenting = false /// 1.

    var body: some View {

        NavigationView {

            VStack(alignment: .center) {

                Image("login")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .padding()

                Text("Hello !")
                    .font(.title)
                    .bold()
                Text("Please select the Option")
                    .bold()
                Button {
                    isPresenting = true
                    print("Login button was tapped")

                } label: {
                    Text("Login")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
                NavigationLink(destination: LoginView(), isActive: $isPresenting) { EmptyView() }

                Button {
                    isPresenting = true
                    print("Registration button was tapped")

                } label: {
                    Text("Registration")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
                NavigationLink(destination: RegistrationView(), isActive: $isPresenting) { EmptyView() }

            }
        }
        .padding()
        .frame(maxHeight: .infinity)
        .overlay(alignment: .topLeading) {
            HStack {
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 60)

                Text("SLOP")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

            }
            .padding(.leading, 20)
        }
    }
}

这是屏幕截图..我期待按钮之间的空间。

这是我单击按钮时的屏幕截图..覆盖层存在并与后退按钮重叠。

Answer 1

有很多方法可以解决您的问题。

尝试这种方法来“模拟隐藏”目标视图中的叠加层， 在覆盖层中使用简单的 if 语句。

这是一个工作示例代码，按照建议使用

NavigationStack

，

struct ContentView: View {
    @State private var path = NavigationPath() // <--- here
    
    var body: some View {
        NavigationStack(path: $path) { // <--- here
            VStack(alignment: .center) {
               // Image("login")
                Image(systemName: "house")  
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .padding()

                Text("Hello !")
                    .font(.title)
                    .bold()
                Text("Please select the Option")
                    .bold()
                Button {
                    path.append("LoginView") // <--- here
                    print("Login button was tapped")
                } label: {
                    Text("Login")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }

                Button {
                    path.append("Registration")  // <--- here
                    print("Registration button was tapped")
                } label: {
                    Text("Registration")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
            }
            // --- here
            .navigationDestination(for: String.self) { destination in
                if destination == "LoginView" {
                    LoginView()
                } else {
                    RegistrationView()
                }
            }
        }
        .overlay(alignment: .topLeading) {
            if !path.isEmpty {  // <--- here
                Color.clear
            } else {
                HStack {
                    Circle()
                        .fill(.blue)
                        .frame(width: 50, height: 60)
                    Text("SLOP")
                        .font(.system(size: 20))
                        .fontWeight(.medium)
                }
                .padding(.leading, 20)
            }
        }
    }
}

struct LoginView: View {
    var body: some View {
        Text("LoginView")
    }
}

struct RegistrationView: View {
    var body: some View {
        Text("RegistrationView")
    }
}

这是一种替代（推荐）方法，使用

.toolbar{...}

代替

.overlay

。

struct ContentView: View {
    @State private var path = NavigationPath() // <--- here
    
    var body: some View {
        NavigationStack(path: $path) { // <--- here
            VStack(alignment: .center) {
               // Image("login")
                Image(systemName: "house")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(10)
                    .padding()

                Text("Hello !")
                    .font(.title)
                    .bold()
                Text("Please select the Option")
                    .bold()
                Button {
                    path.append("LoginView") // <--- here
                    print("Login button was tapped")
                } label: {
                    Text("Login")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }

                Button {
                    path.append("Registration")  // <--- here
                    print("Registration button was tapped")
                } label: {
                    Text("Registration")
                        .padding()
                        .foregroundStyle(.white)
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .background(.blue)
                }
            }
            // --- here
            .navigationDestination(for: String.self) { destination in
                if destination == "LoginView" {
                    LoginView()
                } else {
                    RegistrationView()
                }
            }
            // --- here
            .toolbar {  
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack {
                        Circle()
                            .fill(.blue)
                            .frame(width: 40, height: 40)
                        Text("SLOP")
                            .font(.system(size: 20))
                            .fontWeight(.medium)
                    }
                    .padding(.leading, 20)
                }
            }
        }
    }
}

编辑-1

导航到

LoginView

并且永远不会返回到主视图， 对于推荐的

toolbar{...}

方法，请使用：

struct LoginView: View {
    var body: some View {
        Text("LoginView")
            .navigationBarBackButtonHidden(true) // <--- here
    }
}