时间戳

首页 > 解决方案 > SWIFTUI 按钮登录验证并转到新视图

swift - SWIFTUI 按钮登录验证并转到新视图

问题描述

输入电子邮件和密码后，我需要简单的验证文本字段，下一步按钮，检查电子邮件和密码，然后转到下一个视图。怎么弄的？我有一些代码状态变量和按钮：

struct ContentView: View {

    @State var email = "1"
    @State var password = "1"

    Button(action: {
              if self.email == "1" && self.password == "1"{
              print("Button tapped")
              NextMyView()
              }else {
           print("error")
                            }
                        }) {
                            Image(systemName: "heart.fill")
                                .foregroundColor(.red)
                        }

但是我的想法不起作用，我如何进行此验证并在按钮后转到下一个视图。

标签： swiftbuttonswiftui

解决方案

您将需要NavigationView和 aNavigationLink来实现您正在寻找的东西。

NavigationView将所有内部视图包装在导航控制器中，NavigationLink就像一个触发导航的特殊按钮。

例子：

struct ContentView: View {
  @State private var email: String = "root"
  @State private var password: String = "toor"
  
  @State private var isLoginValid: Bool = false
  @State private var shouldShowLoginAlert: Bool = false
  
  var body: some View {
    NavigationView {
      VStack(alignment: .center) {
        TextField("email", text: self.$email)
        TextField("password", text: self.$password)
        
        NavigationLink(destination: Text("Success"),
                       isActive: self.$isLoginValid) {
                /*
                 Here we put the content view of `NavigationLink`.
                 It could be any `View` even `Button` but in this
                 example we use a `Text` with `onTapGesture`.
                 */
                Text("Login")
                    .onTapGesture {
                    //determine login validity
                    let isLoginValid = self.email == "root" && self.password == "toor"
                    
                    //trigger logic
                    if isLoginValid {
                      self.isLoginValid = true //trigger NavigationLink
                    }
                    else {
                      self.shouldShowLoginAlert = true //trigger Alert
                    }
                }
        }
      }
      .navigationBarTitle("Login Screen")
      .alert(isPresented: $shouldShowLoginAlert) {
        Alert(title: Text("Email/Password incorrect"))
      }
    }
  }
}

NavigationLink定义：

  1. destination导航到一个简单的Text视图
    • 在您的情况下，您应该将其更改为NextMyView()
  2. isActive绑定到一个布尔值loginSuccess，当更新为true应重新渲染视图并导致NavigationLink自动触发
  3. 内容视图很简单Text，onTapGesture我们可以在其中实现成功/失败案例处理。
    • 在您的情况下，您可以更改Text为Image(systemName: "heart.fill")

PS：作为额外的，我包含了触发和显示登录失败警报的逻辑。
希望能帮助到你 ：）

推荐阅读