Navigation View large distance to the top

Hello,

I have the problem that a navigation view with a shape has a high distance to the top (see picture). How can I reduce this so that it looks "normal".

The Code looks like this:

struct EinstellungsView: View {

    @ObservedObject var userSettings = UserSettings()

    @State var darkMode = false;

    

    var body: some View {

        

        NavigationView {

                Form {

                    Section(header: Text("PROFILE")) {

                        TextField("Anzeigename", text: $userSettings.username)

                        Toggle(isOn: $darkMode) {

                            Text("Darkmode")

                        }

                    }

                    

                    Section(header: Text("Währungen")){

                        Picker(selection: $userSettings.currencyBase, label: Text("Währungsbasis")){

                            ForEach(userSettings.currencyOptions, id: \.self) { währungen in

                                Text(währungen)

                            }

                        }

                        Toggle(isOn: $userSettings.currencyFormat) {

                                            Text("Alt. Währungsformatierung")

                        }

                    }

                }

                .navigationBarTitle("Settings")

        }

    }

}
Answered by BabyJ in 726825022

Remove the NavigationView from the detail view; you should only have one at the top of the view hierarchy.

It looks like the Form is being vertically centred in the view. What happens if you embed the Form inside a VStack or ZStack, and set the alignment to the top?

Accepted Answer

Remove the NavigationView from the detail view; you should only have one at the top of the view hierarchy.

Navigation View large distance to the top
 
 
Q