Swiftui expand Vstack to cover remaining space - swiftui

Question

I have a login screen in which I want to cover VStack whole white space which is remaining. I have 2 Vstack If I give Spacer to second one its not working.
My code
struct loginView: View {
#State private var stringOfTextField: String = String()
var body: some View {
ZStack {
LinearGradient(colors: [Color("primarycolor"), Color("secondarycolor")],
startPoint: .top,
endPoint: .center).ignoresSafeArea()
VStack() {
Text("Login").foregroundColor(.white).font(
.system(size: 18)
)
Image("logo")
Spacer()
}
VStack{
TextField("Enter Email", text: $stringOfTextField)
.padding()
.overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
.padding(.bottom)
TextField("Enter Password", text: $stringOfTextField)
.padding()
.overlay(RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.gray, style: StrokeStyle(lineWidth: 1.0)))
.padding(.bottom)
Text("Forgot Password ?")
.frame(maxWidth: .infinity, alignment: .trailing)
.padding(.bottom)
Button(action: {
print("sign up bin tapped")
}) {
Text("SIGN IN")
.frame(minWidth: 0, maxWidth: .infinity)
.font(.system(size: 18))
.padding()
.foregroundColor(.white)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color("secondarycolor"), lineWidth: 1)
)
}
.background(Color("secondarycolor"))
.cornerRadius(25)
}
.padding(.vertical, 60)
.padding(.horizontal, 20)
.background(Color.white)
.cornerRadius(30)
}
}
}
I try to add spacer in Vstack But its not working maybe due to Zstack. Its going on top if I give Spacer() to VStack

Answer 1

I think I understood what you are trying to achieve, just please next time post a complete minimal reproducible example, replacing the custom colours and images.
You can keep the logo visible and cover the bottom area with 4 changes:
Wrap your current VStack with a new one; you need this to add a Spacer() that will keep the logo visible.
Add a Spacer() at the top of the new VStack, right before the existing one
Add a Spacer() at the bottom of the existing VStack
Add the .ignoreSafeArea() modifier to the ZStack
Here's the code:
ZStack {
LinearGradient(colors: [.primary, .secondary],
startPoint: .top,
endPoint: .center).ignoresSafeArea()
VStack() {
Text("Login").foregroundColor(.white).font(
// ... rest of the code
}
// 1) New VStack around the first one
VStack {
// 2) Spacer() before the existing VStack with minimum length, to keep the logo visible
Spacer(minLength: 200)
VStack{
TextField("Enter Email", text: $stringOfTextField)
// ... rest of the code
.cornerRadius(25)
// 3) New Spacer() at the bottom of the existing VStack
Spacer()
}
.padding(.vertical, 60)
.padding(.horizontal, 20)
.background(Color.white)
.cornerRadius(30)
}
}
// 4) Add this modifier to the ZStack
.ignoresSafeArea(edges: [.bottom])