Changing the toolbar item placement on iPad

Question

Let's take the Shortcuts app for example.

On the iOS App:

On the iPadOS App:

As you can see, the toolbar items were on .navigationBarTrailing on iPhone, but it moved to .navigationBarLeading on iPad.

My code looks like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("This is a test app.")
                .navigationTitle("All Shortcuts")
                .toolbar {
                    ToolbarItemGroup(placement: .navigationBarTrailing) {
                        Button("Select") {
                            // Do something...
                        }
                        
                        Button(action: {
                            // Do something else...
                        }) {
                            Label("Some Other Action", systemImage: "plus")
                        }
                    }
                }
        }
    }
}

This works as expected on iPhone, but on iPad the toolbar items appear at the trailing end of the toolbar. I want the toolbar items to be on the trailing end for iPhones and on the leading end for iPads, just like the Shortcuts app. How can I achieve this behavior?

Answer 1

you can check for the used device type:

ToolbarItemGroup(placement: UIDevice.current.userInterfaceIdiom == .pad ?
                           .navigationBarLeading : .navigationBarTrailing) {