Multiple Button in Navigation View: SwiftUI

DevTechie Inc
Jun 24, 2022

ToolbarItem view along with toolbar modifier is used to add buttons to NavigationView but if you want to add group of buttons on leading or trailing side? We can use ToolbarItemGroup view for that.

Let’s take an example to see this in action:

struct MultipleToolbarExample: View {
    var body: some View {
        NavigationView {
            Text("DevTechie")
                .font(.largeTitle)
                .frame(width: 200, height: 200)
                .background(RoundedRectangle(cornerRadius: 20, style: .circular).fill(.orange))
            
                .navigationTitle("Multiple Toolbar")
                .toolbar {
                    ToolbarItemGroup {
                        Button(action: {}) {
                            Image(systemName: "heart")
                        }
                        Button(action: {}) {
                            Image(systemName: "gear")
                        }
                    }
                }
        }
        
    }
}
We can use placement parameter in ToolbarItemGroup to set the location for buttons, as shown below:

struct MultipleToolbarExample: View {
    var body: some View {
        NavigationView {
            Text("DevTechie")
                .font(.largeTitle)
                .frame(width: 200, height: 200)
                .background(RoundedRectangle(cornerRadius: 20, style: .circular).fill(.orange))
        }
        .navigationTitle("Multiple Toolbar")
        .toolbar { 
            ToolbarItemGroup(placement: .navigationBarTrailing) { 
                Button(action: {}) {
                    Image(systemName: "heart")
                }
                Button(action: {}) {
                    Image(systemName: "gear")
                }
            }
        }
    }
}
With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com
Like