SwiftUI - Incorrect insets while transitioning to form

Question

Has anyone else noticed issues with the top insets while transitioning to forms? During the animation, the form includes a margin above the first section, but as soon as the transition completes, the margin is removed. The layout is correct after the animation, so it appears to be an issue of the form not knowing its layout before the animation begins. At least for me, the behaviour can be reproduced with the single view app template, then the following two views:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: FormView()) {
                    Text("Hello, World!")
                }
            }
        }
    }
}

struct FormView: View {
    @State var name: String = ""
    var body: some View {
        List {
            TextField("Name", text: $name)
        }
    }
}

SwiftUI

1.6k

Posted by

lucasgladding

Reply

Add a Comment

Answer 1

I believe this is caused by the title area for the pushed view. In SwiftUI all navigation content views use the large title display mode by default. You've not specified a title on your form view, so while the animation moves in aiming to include a title, once the animation is complete the layout collapses because there's no text there to take up the space.

There are two things you can do: first, you can add a title by attaching .navigationBarTitle("Some Title") to the List in your FormView. Secondly, you can do the same but specify a display mode of .inline, which is the ideal solution and matches Apple's guidelines for non-root views on navigation stacks:

struct FormView: View {
    @State var name: String = ""
    var body: some View {
        List {
            TextField("Name", text: $name)
        }
        .navigationBarTitle("Editor", displayMode: .inline)
    }
}

With either solution in place, you should no longer see the jump as you move from one view to the next.

Posted by

Jim Dovey

Add a Comment

Answer 2

Thanks Jim. I'll use the inline display mode, and that doesn't have the issue.

I noticed the issue on a view with a navigation bar title, but it's possible something else I was doing is causing the problem. Based on some time debugging the view hierarchy (slow animations help in catching the view mid-transition), the title frame is accounted for in the animation layout regardless of whether a title is set, but it collapses as soon as the animation completes. I am defining the navigationBarTitle in the parent component (as I find the title can be based on context when views are reused), so I might be able to resolve it by moving the title into the child component.

I'll update the thread if I learn anything more about it, and file a radar if it seems like a legitimate issue. Thanks again for the details about displayMode: .inline.

Posted by

lucasgladding

Add a Comment

SwiftUI - Incorrect insets while transitioning to form

Replies