xcodeswiftuiios-navigationview

How to get rid of space in nested NavigationView with SwiftUI


Im currently working on a project for iOS using SwiftUI. I have 3 pages (MainMenu, CalendarList, and DateDetails.)

On the 2nd page (CalenderList) there is an empty space between the top of the screen and the actual NavigationBarTitle.

image of 2nd page - CalendarList

on the third page, you can see the back button (to the MainMenu) and there is two empty spaces at the top.

Image of page 3 - DateDetails

I've seen people use .navigationBarHidden to fix this, but i haven't been able to implement it in a way that fixes the problem.

Am i using NavigationView() incorrectly? or is there a special trick?

Here is the code for the MainMenu:

import SwiftUI

struct MainMenu: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Calendar")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(Color(red: 0.055, green: 0.173, blue: 0.322))
                    .padding(.top, 55.0)
                Text("Main Menu")
                    .font(.headline)
                    .foregroundColor(Color(red: 0.635, green: 0.635, blue: 0.635, opacity: 1.0))
                
                /*Image("Logo")
                    .resizable()
                    .frame(width: 150.0, height: 150.0)*/

                Spacer()
                
                HStack {
                    NavigationLink(destination: CalendarList()) {
                        Image(systemName: "calendar")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                            
                            
                    }
                    
                    NavigationLink(destination: CalendarList()) {
                        Image(systemName: "gear")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    }
                    
                }
                
                
                
                HStack {
                    NavigationLink(destination: StudentInfo()) {
                        Image(systemName: "info.circle")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    }
                    
                    NavigationLink(destination: CalendarList()) {
                        Image(systemName: "exclamationmark.circle")
                            .resizable()
                            .frame(width: 75.0, height: 75.0)
                            .padding()
                    }
                }
                
                Spacer()
            }
        }
        
    }
}

Here is the code for CalendarList (page 2):

import SwiftUI

struct CalendarList: View {
    var body: some View {
        NavigationView {
            List(calendarData, id: \.date) { Calendar in
                
                if Calendar.collab {
                    NavigationLink(destination: DateDetails(calendar: Calendar)) {
                        CalendarRow(calendar: Calendar)
                    }
                } else {
                CalendarRow(calendar: Calendar)
                }
            }
            .navigationBarTitle(Text("Schedule"))
        }
        
    }
}

And here is the code for DateDetails (page 3):

import SwiftUI

struct DateDetails: View {
    var calendar: Calendar
    
    var body: some View {
        NavigationView {
            VStack (alignment: .center) {
                //Image("Logo")
                
                    
                HStack {
                    Text(calendar.month.prefix(4) + ".")
                        .font(.largeTitle)
                    Text(String(calendar.date).suffix(1))
                        .font(.largeTitle)
                    
                    Spacer()
                }
                
                HStack {
                    Text(calendar.schedule)
                        .font(.title)
                    Spacer()
                }
                
                Spacer()
                    .frame(height: 30.0)
                
                Text(calendar.info)
                    .font(.body)
                
                Spacer()
            }
            .navigationBarTitle(String(calendar.date).prefix(4).suffix(2) + "/" + String(calendar.date).suffix(2))
                
            .padding()
        }
        
    }
}

Solution

  • Only use NavigationView at the top level, you don't need to add it in every subscreen, just remove it from CalendarList and DateDetails and it will fix your spacing issue