SwiftUI + iOS 14 + Xcode 12

SwiftUI | ToolBar Item

Let’s see how to implement a ToolBar Item inside the Navigation Bar and the Bottom Bar in SwiftUI

From the author

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 12 & SwiftUI

Introduction

In this tutorial, we are going to implement a NavigationView with a ToolBarItem placed in the ToolBar and the NavigationBar. Let’s go!

Create a new Xcode project

Open Xcode > Create a new Xcode project > App template > Call it toolBarTest and select SwiftUI Interface and Lifecycle.

Create a NavigationView

Head to the ContentView.swift file and replace the current Text UI element with the following:

Here we simply add a List embedded in a NavigationView, this last element is necessary to add the toolBar modifier.

Add the toolBar modifier

Right after the NavigationView last graph, add the following lines of code:

That way, you will have 3 buttons placed at the bottom, the top left (navigationBarTrailing) and the top right (navigationBarLeading) of your view.

Run the project 📲

That’s it! You can now run the app. Pretty easy right?

Simulator running

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.