Ashwin
Ashwin

Reputation: 13517

Why is there a huge big gap between the back button and the starting element of the view?

This is how my view looks like on simulator

enter image description here

I don't understnad how this huge gap comes. This is how my view starts

NavigationView {
            VStack {
                
                Form {
                    Section(header: Text("Mandatory Fields")){
                        TextField("First name", text: $identifyingData.firstName)
                            .autocapitalization(.words)
                            .disableAutocorrection(true)
....

This is the code that calls the above view

.toolbar {
                ToolbarItem(placement: .confirmationAction){
                    NavigationLink(destination: MyView(myData: .constant(MyData.empty))){
                        Image(systemName: "plus")
                    }
                }
            }

Upvotes: 1

Views: 445

Answers (1)

Stefan
Stefan

Reputation: 1335

I was enable to reproduce your problem after realizing that your pushed view is also embedded in the NavigationView. Just extract your pushed view outside of NavigationView and problem will be solved. Works for me.

Root view:

struct FirstTestView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FormsView()) {
                Text("Push me")
            }
        }
    }
}

Pushed view:

struct FormsView: View {
    
    @State var txt = ""
    
    
    var body: some View {
        VStack {
            
            Form {
                Section(header: Text("Mandatory Fields")){
                    TextField("First name", text: $txt)
                        .autocapitalization(.words)
                        .disableAutocorrection(true)
                }
            }
            
        }
        .navigationBarTitleDisplayMode(.inline)
    }
}

Result:

img

Upvotes: 3

Related Questions