In SwiftUI or UIKit is there a way to override the padding/spacing the navigation back arrow has by default?

Question

I'm looking for a way to override the spacing the back arrow has to better align with the content on the screen. For example, most of my screens use a .padding() or .padding(.horizontal) to move it away from the edges.

Ideally, in the navigation bar, I would like to use .padding(.horizontal) to ensure the leading and trailing actions buttons align with the screen content. Here is a picture for more context.

This picture has some text contained in a VStack that is using .padding()

Answer 1

It is not that custom after all. You would still use native modifiers, nothing fancy, like this:

NavigationStack {
        VStack {
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(alignment: .topLeading) {
            Button("", systemImage: "chevron.left") {
                
            }
            .foregroundStyle(.black)
            .padding(.horizontal) // <-- Padding as you like here
        }
    }

It does not seem all that "custom" to me, it's just an overlay like the others said. You could place the entire Appbar in the overlay, maybe creating a modifier you write once and then forget it's there:

struct AppBarModifier: ViewModifier {
    
    var title: String
    
    func body(content: Content) -> some View {
        content
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(alignment: .topLeading) {
                ZStack(alignment: .center) {
                    Text(title)
                }
                .frame(maxWidth: .infinity)
                .overlay(alignment: .leading) {
                    Button("", systemImage: "chevron.left") {
                        
                    }
                    .foregroundStyle(.black)
                    .padding(.horizontal) // <-- Padding as you like here
                }
            }
    }
}

And then using it like so:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                
            }
            .modifier(AppBarModifier(title: "Title"))
        }
    }
}

Let me know your thoughts on this!