I have made a login view in SwiftUI and it worked at first but now that I have styled the view, my textfields don't work anymore. I can't type anything in the Textfields. Is this a Xcode bug or have I made a mistake. This is the code:
ZStack {
Color.red.ignoresSafeArea()
VStack {
Image("login")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
Spacer()
}
VStack {
Spacer()
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.zIndex(1)
Button(action: { login() }) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}
.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Register()) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0))
.ignoresSafeArea()
.offset(y: 35)
}
.shadow(radius: 15)
}
The login button and register text do work so I don't think that there is an invisible object above the textfields.
First, you are using three views insid the ZStack. In other words you are laying three layers over the others. You should use 2 views inside the Zstack.
Second, use the clipped() modifier before shadow().
ZStack{
Color.red
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
}
.ignoresSafeArea()
However, using the ZStack is unnecessary.
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
.background(Color.red)
.ignoresSafeArea()
You should use .background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0)) adjust the offset of the innner Vstack.