how to make a VStack span all space?

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

}