Navigation stuff in SwiftUI

Question

I'm trying to figure out how to use the navigation bar in SwiftUI

I want to put BarButtonItem and images inside the NavigationBar

I have been able to display the navigation bar and put titles

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

        }
        .navigationBarTitle(Text("Notes"))

    }
}

Answer 1

iOS 14

You should use the toolbar modifier:

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Cancel") { /* action */ }
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: { /* Actions */ }, label: {
            HStack {
                Image(systemName: "trash")
                Text("Delete")
            }
        })
        .foregroundColor(.red) // You can apply colors and other modifiers too
    }
}

_{Note 1: You can have ANY View there. (not only a Button) and also any modifiers}

_{Note 2: Both codes above and below will generate the same look items but with different approachs}

---

iOS 13 and above (deprecated but still works)

You should use .navigationBarItems() modifier. For example you can add Button or Image like this:

.navigationBarItems(
    leading: Button("Cancel") {
        // Actions
    },
    trailing: Button(action: {
        // Actions
    }, label: { Label("Delete", systemImage: "trash") }
    ).foregroundColor(.red) // You can apply colors and other modifiers too
)

---

? Pro TIP

Always try to encapsulate each item in a separated struct, so your code will be simplified and very easy to replace with newer technologies. for example, take a look at this sample:

.navigationBarItems(
      leading: MyCustomButtonItem(),
      trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)

Answer 2

.navigationBarItems() is the function you are looking for. You can specify a leading view, trailing view, or both. Within the view, you can specify horizontal and vertical stacks to add additional buttons.

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            }
            .navigationBarItems(leading: HStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            }, trailing: VStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            })
            .navigationBarTitle(Text("Notes"))
    }
}

Answer 3

put this from parentViewController

NavigationLink(destination: NotesListView())

Answer 4

SwiftUI 2

In SwiftUI 2 / iOS 14 the navigationBarItems modifier is deprecated.

Instead we should use a toolbar with ToolbarItems.

NavigationView {
    List {
        // ...
    }
    .navigationTitle("Notes")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tap me") {
                // action
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            Image(systemName: "plus")
        }
    }
}

You can see the documentation for more ToolbarItemPlacements.

Answer 5

Check the image here

The toolbar() modifier lets us add single or multiple bar button items to the leading and trailing edge of a navigation view, as well as other parts of our view if needed. These might be tappable buttons, but there are no restrictions – you can add any sort of view.

var body: some View {
    NavigationView {
        ScrollView {
            VStack{
                
            }//: VStack
        }//: Scroll
        .navigationTitle("Settings")
        .toolbar(content: {
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "xmark")
                }
            }
        })
        .padding()
    }//: Navigation
}