Question

我正在尝试从登录视图推送到详细信息视图，但无法做到这一点。即使导航栏也没有显示在登录视图中。如何在swiftUI中按下按钮单击？如何在单击按钮时使用导航链接？

var body: some View {

    NavigationView {

            VStack(alignment: .leading) {

                     Text("Let's get you signed in.")
                       .bold()
                       .font(.system(size: 40))
                       .multilineTextAlignment(.leading)
                       .frame(width: 300, height: 100, alignment: .topLeading)
                       .padding(Edge.Set.bottom, 50)


                       Text("Email address:")
                           .font(.headline)
                                      TextField("Email", text: $email)
                                       .frame(height:44)
                                       .accentColor(Color.white)
                                       .background(Color(UIColor.darkGray))
                                       .cornerRadius(4.0)

                       Text("Password:")
                                      .font(.headline)

                      SecureField("Password", text: $password)
                                   .frame(height:44)
                                   .accentColor(Color.white)
                                   .background(Color(UIColor.darkGray))
                                   .cornerRadius(4.0)


                       Button(action: {
                           print("login tapped")

                       }) {
                           HStack {
                               Spacer()
                               Text("Login").foregroundColor(Color.white).bold()
                               Spacer()
                           }
                       }
                       .accentColor(Color.black)
                       .padding()
                       .background(Color(UIColor.darkGray))
                       .cornerRadius(4.0)
                       .padding(Edge.Set.vertical, 20)
                   }
                   .padding(.horizontal,30)
           }
            .navigationBarTitle(Text("Login"))
        }

Answer 1

要解决您的问题，您需要使用NavigationLink来绑定和管理标签，因此，请按如下所示在视图内部创建一个状态，只需在正文上方添加即可。

@State var selection: Int? = nil

然后按如下所示更新按钮代码以添加NavigationLink

NavigationLink(destination: Text("Test"), tag: 1, selection: $selection) {
    Button(action: {
        print("login tapped")
        self.selection = 1
    }) {
        HStack {
            Spacer()
            Text("Login").foregroundColor(Color.white).bold()
            Spacer()
        }
    }
    .accentColor(Color.black)
    .padding()
    .background(Color(UIColor.darkGray))
    .cornerRadius(4.0)
    .padding(Edge.Set.vertical, 20)
}

意思是，当选择和NavigationLink标签值匹配时，就会进行导航。

我希望这会对您有所帮助。

Answer 2

接受的答案使用正确的NavigationLink(destination:tag:selection:)。

但是，对于只有一个NavigationLink的简单视图，您可以使用更简单变体：NavigationLink(destination:isActive:)

用法＃1

NavigationLink由标准Button激活：

struct ContentView: View {
    @State var isLinkActive = false

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                ...
                NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {
                    Button(action: {
                        self.isLinkActive = true
                    }) {
                        Text("Login")
                    }
                }
            }
            .navigationBarTitle(Text("Login"))
        }
    }
}

用法＃2

NavigationLink被隐藏并由标准Button激活：

struct ContentView: View {
    @State var isLinkActive = false

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                ...
                Button(action: {
                    self.isLinkActive = true
                }) {
                    Text("Login")
                }
            }
            .navigationBarTitle(Text("Login"))
            .background(
                NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {
                    EmptyView()
                }
                .hidden()
            )
        }
    }
}

用法＃3

NavigationLink被隐藏并以编程方式被激活：

struct ContentView: View {
    @State var isLinkActive = false

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                ...
            }
            .navigationBarTitle(Text("Login"))
            .background(
                NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {
                    EmptyView()
                }
                .hidden()
            )
        }
        .onAppear {
            self.isLinkActive = true
        }
    }
}

Answer 3

另一种方法：

SceneDelegate

if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: BaseView().environmentObject(ViewRouter()))
            self.window = window
            window.makeKeyAndVisible()
        }

BaseView

import SwiftUI

struct BaseView : View {

    @EnvironmentObject var viewRouter: ViewRouter

    var body: some View {
        VStack {
            if viewRouter.currentPage == "view1" {
                FirstView()
            } else if viewRouter.currentPage == "view2" {
                SecondView()
                    .transition(.scale)
            }
        }
    }
}

#if DEBUG
struct MotherView_Previews : PreviewProvider {
    static var previews: some View {
        BaseView().environmentObject(ViewRouter())
    }
}
#endif

ViewRouter

import Foundation
import Combine
import SwiftUI

class ViewRouter: ObservableObject {

    let objectWillChange = PassthroughSubject<ViewRouter,Never>()

    var currentPage: String = "view1" {
        didSet {
            withAnimation() {
                objectWillChange.send(self)
            }
        }
    }
}

FirstView

import SwiftUI

struct FirstView : View {

    @EnvironmentObject var viewRouter: ViewRouter

    var body: some View {
        VStack {
            Button(action: {self.viewRouter.currentPage = "view2"}) {
                NextButtonContent()
            }
        }
    }
}

#if DEBUG
struct FirstView_Previews : PreviewProvider {
    static var previews: some View {
        FirstView().environmentObject(ViewRouter())
    }
}
#endif

struct NextButtonContent : View {
    var body: some View {
        return Text("Next")
            .foregroundColor(.white)
            .frame(width: 200, height: 50)
            .background(Color.blue)
            .cornerRadius(15)
            .padding(.top, 50)
    }
}

SecondView

import SwiftUI

struct SecondView : View {

    @EnvironmentObject var viewRouter: ViewRouter

    var body: some View {
        VStack {
            Spacer(minLength: 50.0)
            Button(action: {self.viewRouter.currentPage = "view1"}) {
                BackButtonContent()
            }
        }
    }
}

#if DEBUG
struct SecondView_Previews : PreviewProvider {
    static var previews: some View {
        SecondView().environmentObject(ViewRouter())
    }
}
#endif

struct BackButtonContent : View {
    var body: some View {
        return Text("Back")
            .foregroundColor(.white)
            .frame(width: 200, height: 50)
            .background(Color.blue)
            .cornerRadius(15)
            .padding(.top, 50)
    }
}

希望这会有所帮助！

NavigationView和导航按钮上的链接单击快速UI？

3 个答案: