SwiftUI-登录页小样板

实现登录页样板开发
用到的view有:NavigationView、ZStack、Color、Circle、TextField、Button、Alert、NavigationLink

登录页

校验完成,实现跳转
账号错误提示

密码错误提示
import SwiftUI

struct TestVC: View {
    
    @State private var username = ""
    @State private var password = ""
    @State private var userIsWrong = false
    @State private var passIsWrong = false
    @State private var errorMessage = ""
    @State private var correct = false
    
    
    @State private var isShow = false
    
    var body: some View {
            NavigationView{
            ZStack {
                Color.blue
                    .ignoresSafeArea()
                
                Circle()
                    .scale(1.7)
                    .foregroundColor(.white.opacity(0.4))
                
                Circle()
                    .scale(1.3)
                    .foregroundColor(.white)
                
                VStack(spacing: 20) {
                    Text("登录")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                    
                    TextField("账号", text: $username)
                        .padding()
                        .background(Color.black.opacity(0.1))
                        .frame(maxWidth: .infinity)
                        .frame(height: 50)
                        .cornerRadius(5)
                        .border(.red, width: userIsWrong ? 3 : 0)
                        .padding(.horizontal)
                        .onChange(of: username) { newValue in
                            userIsWrong = false
                        }
                    
                    TextField("密码", text: $password)
                        .padding()
                        .background(Color.black.opacity(0.1))
                        .frame(maxWidth: .infinity)
                        .frame(height: 50)
                        .cornerRadius(5)
                        .border(.red, width: passIsWrong ? 3 : 0)
                        .padding(.horizontal)
                        .keyboardType(.numberPad)
                        .onChange(of: password) { newValue in
                            passIsWrong = false
                        }
                    
                    Button {
                        
                        guard username == "lsj" else {
                            userIsWrong = true
                            isShow = true
                            errorMessage = "账号错误"
                            return
                        }
                        guard password == "123" else {
                            passIsWrong = true
                            isShow = true
                            errorMessage = "密码错误"
                            return
                        }
                        correct = true
                    
                    } label: {
                        Text("提交")
                            .padding()
                            .frame(maxWidth: .infinity)
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(10)
                            .padding(.horizontal)
                    }.alert(errorMessage, isPresented: $isShow) {
                        Button {
                            
                        } label: {
                            Text("重新输入")
                        }

                    }
                    
                    
                    NavigationLink("", isActive: $correct) {
                        Text("dddd")
                    }
                }
            }.navigationBarHidden(true)
        }
    }
}

struct TestVC_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            TestVC()
                
        }
    }
}

你可能感兴趣的:(SwiftUI-登录页小样板)