实现登录页样板开发
用到的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()
}
}
}