Boundary on top of NavigationView

Question

When I was trying to change the color of my navigation view page I realized that there is a weird boundary on top. I can't figure out what it is or how to get rid of it. Would anyone happen to know?

Here is the code.

Image with displayMode: .inline

The parent view code is the view that is presenting the page I am having trouble with.

Parent View:

Code:

import Foundation
import SwiftUI
import UIKit


struct ContentView: View {

    
    
    // variable for view model
@ObservedObject var viewModel = VariableViewModel()
    

// SWIFT UI START
    var body: some View {
           
        // Main page
        NavigationView {
            ZStack {
                Color(.orange).edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        VStack {
            
            HStack {
                Spacer()
            NavigationLink(destination:
                SettingsView()
            ){
                Image(systemName: "gearshape.fill").font(.system(size: 25))
            }
                
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                
            NavigationLink(destination:
                Text("You")
            ){
            Image(systemName: "chart.bar.xaxis").font(.system(size: 25))
            }
                Spacer()
            }
            
            Text("Pick a mode!").font(.largeTitle).bold().offset(x: 0, y: 30)
            ZStack {
            VStack {
                
                Spacer()
                
                // ADDITION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Addition")
                                }
                ){
                    HStack {
                    Text("Addition")
                    Image(systemName: "plus.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
                
                Spacer()
                
                // SUBTRACTION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Subtraction")
                                }
                ){
                    HStack {
                    Text("Subtraction")
                    Image(systemName: "minus.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
                
                
                Spacer()
                
                // MULTIPLICATION SECTION

                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Multiplication")
                                            }
                ){
                    HStack {
                    Text("Multiplication")
                    Image(systemName: "multiply.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }

                
                Spacer()
                
                // DIVISION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Division")
                                }
                ){
                    HStack {
                    Text("Division")
                    Image(systemName: "divide.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
            }
            }.navigationBarHidden(true)
            
        }
        }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Code:

import SwiftUI

struct MathView: View {
    
    @ObservedObject var viewModel = VariableViewModel()
    
    let operatorName: String
    
    var body: some View {
        ZStack {
            Color.orange.edgesIgnoringSafeArea(.all)
            
            VStack {
                Spacer()
                
                NavigationLink(destination:
                MathContentView(operatorName: "Addition", operatorSymbol: "plus", difficultyNumber1: 5, difficultyNumber2: 5)
                ) {
                    Text("Easy")
                    .font(.title2)
                    .padding(35)
                    .foregroundColor(.white)
                    .background(Color(.systemGreen))
                    .cornerRadius(40)
                    .onAppear(perform: {
                        if operatorName == "Addition" {
                            self.viewModel.result = self.viewModel.num1 + self.viewModel.num2
                        } else if operatorName == "Subtraction" {
                            self.viewModel.result = self.viewModel.num1 - self.viewModel.num2
                        } else if operatorName == "Multiplication" {
                            self.viewModel.result = self.viewModel.num1 * self.viewModel.num2
                        };
                        withAnimation {
                            viewModel.resetVariables()
                            // numbers generator
                        }
                    })
                }
                
                Spacer()
            }
        }
    }
}

Answer 1

To remove the empty space below the NavigationView add .navigationBarTitleDisplayMode(.inline) to the top view:

ZStack {
    // ...
}
.navigationBarTitleDisplayMode(.inline)

Then, the slim line between the navigationViewTitle and the content below comes from the Spacer at the top of the VStack in NavigationLink that pushes the MathView.

NavigationLink(destination:
    VStack {
        Spacer() // this causes the *slim line*
        MathView(operatorName: "Addition")
    }
)

You need to remove the Spacer (and the VStack as well):

NavigationLink(destination:
    MathView(operatorName: "Addition")
)