导航到按钮单击 SwiftUI 上的新屏幕 [英] Navigate to new screen on button click SwiftUI

问题描述

我有一个登录屏幕，希望在单击登录"按钮时导航到新屏幕.我确实尝试将按钮和整个屏幕布局包装在 NavigationView 下，并将按钮嵌入到导航链接中.我无法弄清楚单击按钮时如何显示新屏幕.以下是登录屏幕的代码.

I have a login screen and wish to navigate to a new screen when the Login button is clicked. I did try to wrap the button and the entire screen layout under NavigationView and embedded the button in a Navigation Link. I am unable to figure out how to show the new screen when the button is clicked. Following is the code for the login screen.

ZStack {
        Color.red
            .edgesIgnoringSafeArea(.all)


        VStack(alignment: .center, spacing: 180.0) {
            Text("SwiftUI")
            .font(.largeTitle)
            .bold()
            .padding()

            VStack(alignment: .center, spacing: 25) {
                TextField("Username", text: $userName)
                    .padding(.all)
                    .background(Color.white)
                    .cornerRadius(10)

                TextField("Password", text: $userPassword)
                    .padding(.all)
                    .background(Color.white)
                .cornerRadius(10)

                Toggle(isOn: $isFirstTimeUser) {
                    Text("First Time User")
                        .font(.headline)
                        .bold()
                        .padding(.horizontal, -10)
                        .foregroundColor(Color.white)
                }.padding(.horizontal, 17)

                Button(action: {
                    if self.userName.count <= 5 {
                        self.isAlertShown = true
                    } else {


                    }
                })
                    {
                        Text(isFirstTimeUser ? "SignUp" : "Login")
                            .fontWeight(.medium)
                            .font(.title)
                            .foregroundColor(Color.red)
                            .padding(.horizontal, 10)
                    }.padding()
                .background(Color.white)
                .cornerRadius(10)
                    .alert(isPresented: $isAlertShown) {
                        () -> Alert in
                        Alert(title: Text("UserName Invalid"), message: Text("Username has to be more than 5 characters"), dismissButton:.default(Text("Got that!")))
                    }
            }.padding(.horizontal, 17)

        }
    }

推荐答案

这里有可能的方法

1) 将链接标签状态变量添加到您的视图

1) Add link tag state variable to your View

@State private var current: Int? = nil

2) 将您的视图层次结构包装到 NavigationView 中，以使 NavigationLink 能够工作

2) Wrap your view hierarchy into NavigationView to make possible NavigationLink to work

3) 在按钮上方添加标记的 NavigationLink

3) Add tagged NavigationLink above your button

NavigationLink(destination: YourDestinationViewHere(), tag: 1, selection: $current) {
    EmptyView()
}

4) 为按钮动作添加链接标签选择

4) Add link tag selection to button action

Button(action: {
    if self.userName.count <= 5 {
        self.isAlertShown = true
    } else {
        self.current = 1 // this activates NavigationLink with specified tag
    }
})

这篇关于导航到按钮单击 SwiftUI 上的新屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！