Why is the navigation view bar so large in swiftui?

Question

import SwiftUI
struct SecondView: View {

var ResearchMCQ: Question


//Creating Variables for Revision Topics
@State private var setOptionOne = false
@State private var setOptionTwo = false
@State private var setOptionThree = false
    
//User Home Page View
        var body: some View {
            
//Allows for Navigation and Scrolling
        NavigationView {
        ScrollView{
            
//App Logo and Vertical Stacks
            VStack(spacing: 1.0) {
            Image("AppLogo")
                    .resizable()
                    .scaledToFit()
                    .padding(.trailing, 50.0)
                .frame(height: 100, alignment: .topLeading)

    Spacer()
    Spacer()
                
//Multiple Choice Question Appears
    Group {
    Text(ResearchMCQ.question)
    .padding(.trailing, 4)
    
    Spacer()
    Spacer()
        
//Ensures Only One Answer Can Be Selected
        let OptionOne = Binding<Bool>(get: { self.setOptionOne }, set: { self.setOptionOne = $0; self.setOptionTwo = false; self.setOptionThree = false })
        let OptionTwo = Binding<Bool>(get: { self.setOptionTwo }, set: { self.setOptionOne = false; self.setOptionTwo = $0; self.setOptionThree = false })
        let OptionThree = Binding<Bool>(get: { self.setOptionThree }, set: { self.setOptionOne = false; self.setOptionTwo = false; self.setOptionThree = $0 })

//Shows User MCQ Options
        VStack {
            Toggle(ResearchMCQ.options[0], isOn: OptionOne)
                .toggleStyle(.button)
                .tint(Color(.gray))
                .foregroundColor(Color("Black-White"))
            Toggle(ResearchMCQ.options[1], isOn: OptionTwo)
                .toggleStyle(.button)
                .tint(Color(.gray))
                .foregroundColor(Color("Black-White"))
            Toggle(ResearchMCQ.options[2], isOn: OptionThree)
                .toggleStyle(.button)
                .tint(Color(.gray))
                .foregroundColor(Color("Black-White"))
                 }
    }
                
                
        }
            
           // .padding(.top, -150)
    }
}
            
//Allows Navigation Through Pages
   .navigationTitle("")
    .padding(.top, -100)
            
        }

}

Shows large navigation bar

I am trying to create a navigation bar, however I want it to be empty, hence the empty quotations mark in the code. Any idea on how I can make it smaller as when I scroll up as shown in the image the navigation bar takes up a good chunk of the page. As a first time swift coder, any help would be appreciated!!!

Answer 1

You just need one NavigationView. I guess you also have a NavigationView in your FirstView. And it is enough as this top NavigationView will contain all your deeper views.

So you don't need NavigationView {} in your SecondView. It is only needed in your FirstView. Just remove it from your SecondView and you will have a smaller Navigation bar.

Also .navigationTitle("") should be inside your NavigationView, and not as a modifier of itself :

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink("second View", destination: SecondView())
                .navigationTitle("")
        }
    }
}

I have modified your code as I don't have the Question class/struct, but it should work the same with your code

struct SecondView: View {
    var body: some View {
        // I removed the NavigationView that was there
        ScrollView{
            VStack {
                Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.")
                Toggle("Toogle1", isOn: .constant(true))
                Toggle("Toogle2", isOn: .constant(false))
                Toggle("Toogle3", isOn: .constant(true))
            }
        }.navigationTitle("")
    }
}

Result :