SwiftUI view is in the middle instead of in the top

I had the same issue, but found the the problem I had was in using navigationView multiple times.

I thought that we should have NavigationView in every view, but apparently, we should place navigationView only in the main view of the application, and all other views that we enter via navigationLink, automatically get the back option without the need to mention NavigationView again.

So check if you use navigationView more than once in your code.

Strangely, we can specify navigationBarTitle even in views that dont have the navigationView mentioned in them, this is because the navigationView is at the parent view. Use "displayMode: .inline", to make the navigation area as minimal as possible, it will save you real-estate.

Another thing to do, is to use Spacer(). If you want all your items to be at the top, just put Spacer() as the last item in VStack, and it will push all items to the top.

See this example:

VStack {
    // What you care about displaying
    Text("Something to Show 1")
    Text("Something to Show 2")
    Text("Something to Show 3")

    // This should be the last, put everything to the top
    Spacer()             
}
.navigationBarTitle(Text("The Title"), displayMode: .inline)

I had a similar issue, I wanted a VStack to align its content on the top of the screen, and was only using a NavigationView in the parent, but the VStack showed centered. What fixed it for me was using a Spacer(), like this:

    VStack(alignment: .leading, spacing: 10){
        HStack(alignment: .center, spacing: 5.0) {
            ...
        }
        Group{
            ...
        }
        Spacer() //<-- This solved my problem
   }

Tags:

Ios

Swift

Swiftui