Swift UI forms - Why so much space?

Question

why is there so much space in my form?

I want to have the first TextField at the top of the View i hope someone can help me thank you guys.

Code:

var body: some View {
        NavigationView{
            Form{
                Section(header: Text("Kunde")){
                    TextField("Vorname", text: $vorName)
                    TextField("Name", text: $name)
                }.frame(alignment: .top)
                Section(header: Text("Telefonnummer")) {
                    TextField("Mobil", text: $number)
                        .lineSpacing(10)
                        .multilineTextAlignment(.leading)
                        .lineLimit(10)
                        .keyboardType(.numberPad)
                    TextField("Festnetz", text: $home)
                        .lineSpacing(10)
                        .multilineTextAlignment(.leading)
                        .lineLimit(10)
                        .keyboardType(.numberPad)
                } 
   }
}

user_886703 · Answer

From what I see on the screenshot - the application has NavigationView somewhere in the hierarchy. And then there is another NavigationView added as part of the current view.

The first step is to remove the nested NavigationView from the current screen. One NavigationView should be enough in this case. So, the code becomes:

var body: some View {
    Form {
        Section(header: Text("Kunde")){
        ....
    }
}

Then, there will be a bit of space added by the navigation bar as it has automatic style by default.

So the second step is to remove this space. We can change the navigation bar style to inline like this:

var body: some View {
    Form {
        ... the form code ...
    }
    .navigationBarTitle("Title", displayMode: .inline) // the title can be empty string if needed
}

And it finally becomes a nicely laid out form:

Swift UI forms - Why so much space?

1 Answers