如何使用 SwiftUI 消除嵌套 NavigationView 中的空间

Question

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.

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

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()
        }
        
    }
}

Answer 1

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

Answer 2

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