Search code examples
swiftuitextfieldnavigationview

SwiftUI - Why is there space between the navbar and the first component I've written?

I have a SwiftUI view, the top of which looks like this:

enter image description here

where "name your item" is a TextField and the buttons at the top are part of a NavigationView toolbar. I've defined this view as follows:

NavigationView {
  ZStack {
    Color("backgroundPrimary")
    .ignoresSafeArea()
        
     VStack(alignment: .center) {
       ZStack {
         ScrollView(showsIndicators: false) {
           TextField("Name your workout...", text: $mainTitle)
           .padding(.horizontal)
           .font(.custom("Helvetica Bold", size: 30))
    
            ...
        }
      }
    }

I want the TextField to be positioned nearer to the top, much like the position of a NavigationTitle, but instead there's this gap I don't know the origin of. None of the stacks have any vertical padding. I've tried adding .padding(.top, -30) to the TextField but this messes up the area that you can tap on the TextField to bring up the keyboard.

Note: The toolbar ends at the blue line, then there's the gap, then there's the TextField.

Does anyone know how I can position this TextField further towards the top?

Solution

  • It is still the NavigationBar saving room for the title. Add

        .navigationBarTitleDisplayMode(.inline)

    to your view.