how to make a VStack span all space? - swiftui

Question

I'm trying to eliminate the space that the top stack covers, but as much as I need the image to cover the space where the time is shown and the battery is not successful, does anyone have any idea how to do it?
I leave a photo of what I want to eliminate, it is circled with yellow, I also leave my code.
import SwiftUI
struct LoginView: View {
#ObservedObject var LoginViewM:LoginViewModel
var body: some View {
GeometryReader{ geo in
NavigationView{
VStack(spacing:10){
topImage
.frame(width: geo.size.width, height: 270)
.padding(.bottom)
VStack{
usernameTextField
errorUsernameLabel
passwordTextField
errorPasswordLabel
}
.aspectRatio(contentMode: .fill)
Spacer(minLength: 10)
VStack{
buttonLogin
}
Spacer(minLength: 10)
VStack{
textInBottom
}
Spacer(minLength: 10)
}
.padding(.all)
.background(Color.black)
}
.padding(.all)
.background(Color.black)
.frame(width: geo.size.width, height: geo.size.height,alignment: .bottom)
}
.padding(.vertical)
.background(Color.black, alignment: .bottom)
.ignoresSafeArea(.all)
}
}
extension LoginView{
var topImage:some View{
Image("header2")
.resizable()
.overlay( ImageOverlay() , alignment: .center)
.background(Color.black)
}
var usernameTextField:some View{
HStack{
TextField("Phone number, username or email", text: $LoginViewM.username)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.foregroundColor(.white)
.placeholder(Text("Phone number, username or email").padding().foregroundColor(.white), show: LoginViewM.password.isEmpty)
.background(Color.black)
// need to hide this icon
Image("menuCloseSmall")
.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 14))
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
.padding()
}
var errorUsernameLabel:some View{
Text(" Hey you, no user found. Make sure you’ve provided the \n correct information.")
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var passwordTextField:some View{
HStack{
TextField("Password", text: $LoginViewM.password)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.padding(.bottom)
.foregroundColor(.white)
.placeholder(Text("Password").padding().foregroundColor(.white), show: LoginViewM.username.isEmpty)
.background(Color.black)
Image("editShow")
.padding()
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
.padding()
}
var errorPasswordLabel:some View{
Text(" Incorrect password for \(LoginViewM.password). Please try again.")
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var buttonLogin:some View{
Button(action: {
}) {
Text("Log In")
}
.font(.custom("Montserrat-Medium", size: 16))
.foregroundColor(Color.ligthGray)
.frame(width: 174, height: 42, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 18)
.stroke(Color.gray, lineWidth: 1.5))
}
var textInBottom:some View{
HStack(spacing:5){
Text("Forgot")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("password"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
Text("or")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("username"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
}
.padding()
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView(LoginViewM: LoginViewModel())
}
}

Answer 1

That gap is for navigation bar's title gap. You can set .navigationTitle("Example") to see that. If you want to hide it you need to set .navigationBarHidden(true).
NavigationView {
VStack(spacing: 10) {
// ...
}
.navigationBarHidden(true) // <-- Here
}