How to re-position Navigation Bar Buttons in SwiftUI

Question

I have implemented the navigationBarTitle and I am trying to implement a navigationBarItem however the default position looks odd.

I want to be able to position the Next button in line with the navigationBarTitle . I was able to accomplish something with this code:

.navigationBarTitle(Text("Names"))
.navigationBarItems(trailing:
            Button(action: {
                print("tapped")
            }) {
                Group {
                    Text("Next")
                }.position(x: 0, y: 60).background(Color.purple)

            })

However the issue it that the button did not move, so it's not tappable where it displays Next. (I highlighted the position purple to demonstrate.)

Is there any way to accomplish this in a cleaner fashion? Or other methods or stacks that I could implement while keeping the navigationBarTitle Large Tile look in SwiftUI? Thank you!

Answer 1

You can wrap the button in a ZStack and position the Button inside of the ZStack like this:

import UIKit
import PlaygroundSupport
import SwiftUI

 struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Names")
                .navigationBarTitle(Text("Names"))
                .navigationBarItems(trailing:
                    ZStack {
                            Button(action: {
                                print("tapped")
                            }) {
                                Group {
                                    Text("Next")
                                }.background(Color.purple)
                            }.position(x: 0, y: 60)
                        })
        }
    }
}

let viewController = UIHostingController(rootView: ContentView())

PlaygroundPage.current.liveView = viewController

I tried it in the above playground example and it worked:

Edit:

This appears to make the button unresponsive unless you touch and drag: