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()
}
@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.