Creating a navbar with 3 items

user_5724342 0
Viewed 382

I'm trying to create something like this:

enter image description here

A navigation bar with 3 items, is it possible to do this using navigationBarItems?

My current plan is to hide the navbar using:

.navigationBarTitle("")
.navigationBarHidden(true)

and then creating the 3 buttons using a HStack. The Problem I have is because I'm hiding the navbar, the click of one of the buttons take it to another view, which also then hides the navbar (Thats not what im looking for)

I have tried:

.navigationBarItems(trailing:
    HStack {
        Button("About") {
            print("About tapped!")
        }

        Button("Help") {
            print("Help tapped!")
        }
    }
)

But this creates the two items next to each other on the right side. I tried putting a Spacer() in the above HStack, but this doesn't work.

I would prefer to use navigationBarItems but can't seem to find a way to centre an item?

swiftui swift
1 Answers

A navigation bar with 3 items, is it possible to do this using navigationBarItems?

No. Moreover navigationBarItems modifier is deprecated since SwiftUI 2.0

SwiftUI 2.0

This can be done with toolbar modifier as easy as attach it to any view inside NavigationView

Demo prepared & tested with Xcode 12 / iOS 14:

demo

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button(action: {}) { Image(systemName: "gear") }
    }
    ToolbarItem(placement: .principal) {
        Button(action: {}) { Image(systemName: "car") }
    }
    ToolbarItem(placement: .navigation) {
        Button(action: {}) { Image(systemName: "chevron.left") }
    }
user_122990300
Related