swiftuixcode11ios13

How to align a SwiftUI navigationBarTitle to be centered?


How does one centre a navigation bar title in SwiftUI?

var body: some View {
    NavigationView {
        .navigationBarTitle("Todo Lists")
    }
}

Solution

  • .navigationBarTitle allows for three display modes - .large, .inline, and .automatic.

    From the documentation:

    case automatic
    

    Inherit the display mode from the previous navigation item.

    case inline
    

    Display the title within the standard bounds of the navigation bar.

    case large
    

    Display a large title within an expanded navigation bar.

    So it depends what you mean when you say "how does one centre a navigation bar title in SwiftUI?" You cannot center a navigation bar title that has a display mode of .large. You also cannot left-align or right-align a navigation bar title that has a display mode of .inline. If you want a navigation bar title that is centered, then your only option is to use .inline.

    var body: some View {
        NavigationView {
            CustomView()
                .navigationBarTitle("Todo Lists", displayMode: .inline)
        }
    }