Menu
What are the differences between navigationBarItems vs toolbar in SwiftUI? I've been using them interchangeably and feel like they are doing the same things with different syntax, eg: put buttons on navigationBar (.leading/.trailing).
279
Toolbar items in the bottom bar As we can see in the example, SwiftUI provides the toolbar modifier that we can use to add toolbar items. A ToolbarItem has two required parameters. The first one is the placement and the second one is a closure to build the view that represents our action. Toolbar items in bottom bar.
Overview. NavigationView is a container that adds stack-based navigation to a view, along with a (optional) navigation bar.
To show a Navigation Bar using SwiftUI, we should use the NavigationView component that is responsible for this purpose. It requires that we provide the Content that is a View type. The Content can be anything from a text field to scrollable content. In short, it can be any SwiftUI view.
To change a navigation bar color in SwiftUI, you apply toolbarBackground modifier to the content view of NavigationStack . NavigationView is deprecated in iOS 16. toolbarBackground accepts two parameters. ShapeStyle : The style to display as the background of the bar.
Usually, SwiftUI places this item in the navigation bar on iOS or on top of other views on watchOS. There are placement options that we can use only in toolbars presented by a modal view. confirmationAction - The item represents a confirmation action for a modal interface.
There is a downside with toolbars in SwiftUI, and that is that it cannot be used in iOS versions less than 14. If you are planning to support both iOS 13 and 14+, then I’m afraid that you are a bit out of luck, but not entirely. You may use the view modifiers related to the navigation bar instead of a toolbar at the top.
That’s why SwiftUI provides us another type called ToolbarItemGroup. ToolbarItemGroup allows us to fix toolbar items in the specific placement. Let’s take a look at a very quick example. Today we learned how to use the new Toolbar API to present actions in our apps in a unified way on different platforms.
navigationBarLeading: It places the item on the leading edge of the toolbar. navigationBarTrailing: It places the item on the trailing edge of the toolbar. principal: It places the item in a prominent position, which is the center of the toolbar for iOS and macOS.
As mentioned by Lorem Ipsum, .toolbar is the way to go forward. The biggest difference is that .navigationBarItems is iOS/iPad OS only, whereas .toolbar works on macOS as well.
This makes it much easier to create universal views.
If you're just targeting mobile devices, there isn't really any difference in outcome at the moment.
192
.toolbar will (by default) automatically display the button on the leading or trailing edge depending on the locale.
.toolbar(
Button("Edit") {
print("Editing ...")
}
)
This will show the button on the trailing edge for left- to-right languages, or on the leading edge for right-to-left. You can put it where you want by wrapping it in a ToolbarItem().
.toolbar(
ToolbarItem(placement: .navigationBarLeading) {
// Button
}
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
