Search code examples
iosswiftswiftuiswiftui-navigationviewswiftui-form

How do you remove the margin from the top of the screen to a form?


I have this space between the top of the screen and my text input box. How can I reduce this space? I don't want to bring the input box up too far as it will be obstructed by the notch. However, I want to bring it up enough so it isn't looking strange in my app.

Also, how can I remove the white background behind the button so it's just the blue and not the white rectangle behind it?

Here is a screenshot:

enter image description here

Here is the code:

import SwiftUI

struct ContentView: View {
    @State var TextPlaceholder = ""
        
    var body: some View {
        
        GeometryReader { geo in
            NavigationView{
                VStack{
                    Form {
                        Section{
                            TextField("Placeholder", text: $TextPlaceholder)
                                .multilineTextAlignment(TextAlignment.center)
                                .frame(
                                    height: geo.size.height*0.65,
                                    alignment: .center
                                )
                        }
                    }
                    Section{
                        Button(action: {}) {
                            SwiftUI.Text("Submit")
                                .frame(width: 250, height: 50, alignment: .center)
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(8)
                        }.padding()
                    }
                    
                }
                //.navigationTitle("Summarizer")
            }//.edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)
            .previewInterfaceOrientation(.portraitUpsideDown)
    }
}

Solution

  • Ok so to answer this anything wrapped in a navigation view excepts header text hence the large space - by removing the nav view the space is removed. Hopefully this helps anyone who is also scratching their head over this!