SwiftUI : How to get a Navigation Title aligned with Back Button

Question

I'm trying to get the navigation title vertically aligned with the back button in a NavigationDetail view in SwiftUI. Here's what this looks like currently:

Below's my code for adding the Navigation Bar title to the view. How do I get it vertically aligned with the Back button?

 var body: some View {
        Text("My Detail View")
            .navigationBarTitleDisplayMode(.inline)

        VStack {
            List {
                ForEach(0..<layerSettings.count, id: \.self) { each in
    ...
   }
}

You want My Detail View being drawn on the same line that the Back button, having the text view overlap the navigation bar, is that it? — Alexandre Fenyo, Sep 17 '22 at 22:43

score 4 · Accepted Answer · answered Sep 18 '22 at 01:06

4

If you need to draw "My Detail View" on the same line that the Back button, try to do like this:

 NavigationView {
    VStack() {
       ...
    }
    .navigationBarTitle(Text("My Detail View"),
                        displayMode: .inline)
 }

answered Sep 18 '22 at 01:06

stosha

2,108
2
27
29

score 4 · Answer 2 · answered Nov 19 '22 at 01:59

Since navigationBarTitle(_:) is Deprecated. Use navigationTitle(_:) together with navigationBarTitleDisplayMode(_:) in iOS 14.0+

NavigationView {
    VStack() {
       ...
    }
    .navigationTitle(Text("My Detail View"))
    .navigationBarTitleDisplayMode(.inline)
 }

SwiftUI : How to get a Navigation Title aligned with Back Button

2 Answers2