Search code examples
swiftuiswiftui-navigationstack

Unwanted whitespace in Custom NavigationBar in SwiftUI

I have an unwanted white space in my custom SwiftUI NavigationBar, which I want gone. I played around with removing the paddings, but I don't get the wanted looks nor does that remove the white space. I use the NavigationBar in a NavigationStack inside other views.

Can anyone help with this problem please?

/// A custom navigation bar item that displays the app title and a specific title.
struct NavigationBarItem: View {
    
    /// The title of the navigation bar item.
    var title: String

    var body: some View {
        VStack() {
            HStack(alignment: .center) {
                Spacer()
                Text("Test")
                    .font(.largeTitle.weight(.bold))
                    .foregroundColor(.white)
                Spacer()
            }
            HStack(alignment: .center) {
                Spacer()
                Text(title)
                    .font(.subheadline)
                    .foregroundColor(.white)
                Spacer()
            }
        }
        .padding()
        .background(.blue)
    }
}

#Preview {
    NavigationBarItem(title: "Test 2.0")
}

I use it like the following in other views:

var body: some View {
        NavigationStack {
            NavigationBarItem(title: NSLocalizedString("title.settings", comment: ""))
            
            List {
                //....
            }
        }
    }

I scrolled on that picture, but the white space is also visible without it, as it differs from the grey background from the list

Screenshot

Solution

  • Try using a VStack with spacing: 0 as the parent container for the custom header and other content:

    var body: some View {
    NavigationStack {
        VStack(spacing: 0) { // <- ADDED
            NavigationBarItem(title: NSLocalizedString("title.settings", comment: ""))
            
            List {
                //....
            }
        }
    }
}

    Screenshot