SwiftUI List misaligned with title bar.

Hello! I am making an app in SwiftUI and find it hard to make good-looking UIs with SwiftUI when using the List. When having a big navigation bar, the list appears misaligned with the title.

This is a preview within Xcode. Don't know if that changes anything 🤷. Below is the code. I should note I am using Xcode 16 beta 3.

//
//  SwiftUIView.swift
//

import SwiftUI

struct SwiftUIView: View {
    struct D {
        var id: Int
        var name: String
        var identifier: String
    }
    let items: [(Int, D)] = [
        (0, D(id: 0, name: "Test One", identifier: "one.example.test")),
        (1, D(id: 1, name: "Test One", identifier: "two.example.test")),
        (2, D(id: 2, name: "Test One", identifier: "three.example.test")),
        (3, D(id: 3, name: "Test One", identifier: "four.example.test"))
    ]
    var body: some View {
        NavigationStack {
            List(items, id: \.1.id) { idx, d in
                VStack(alignment: .leading) {
                    Text(d.name)
                        .bold()
                    Text(d.identifier)
                }
            }
            .navigationTitle("Hello Title")
        }
    }
}

#Preview {
    SwiftUIView()
}
Answered by DTS Engineer in 795984022

@bjosh You could set the navigationBarTitleDisplayMode to change the title display mode to inline .navigationBarTitleDisplayMode(.inline)

or you could specify a grouped, plain or inset listStyle using the .listStyle(.grouped) modifier, you'll notice that the List better aligns with the navigation title.

Hmm, this doesn't seem to be happening on my iPhone.

@bjosh You could set the navigationBarTitleDisplayMode to change the title display mode to inline .navigationBarTitleDisplayMode(.inline)

or you could specify a grouped, plain or inset listStyle using the .listStyle(.grouped) modifier, you'll notice that the List better aligns with the navigation title.

SwiftUI List misaligned with title bar.
 
 
Q