7

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()
        }
        
    }
}
vacawama
  • 150,663
  • 30
  • 266
  • 294
devmax
  • 413
  • 1
  • 5
  • 5

2 Answers2

10

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

Ludyem
  • 1,709
  • 1
  • 18
  • 33
  • thanks! I had no idea. I deleted all but the MainMenu NavigationViews and it works great just like I wanted. – devmax Jul 05 '20 at 04:11
  • 2
    How does this apply when you might have navigated to a tabview? Doesnt seem to show the titles in the tabs. – Ludvig W Mar 28 '21 at 15:31
  • Yeah @LudvigW I have the same situation where sometimes I want NavigationView at the top level and sometimes I want it nested within a tabview! – JonathanC Sep 02 '22 at 05:00
  • In iOS 16 this fix is no longer needed, but you can still do it to be compatible with iOS 15. – mluisbrown Jun 27 '23 at 18:19
0

I think you can delete the NavigationView of DateDetails.

If you want to change the navigationbar, you may want to edit navigationBarItems or change navigationBarHidden to true and customize it.

https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-bar-items-to-a-navigation-view

Ray
  • 767
  • 4
  • 11