Right aligning a .bottomBar ToolbarItem in SwiftUI for iOS 14

Question

I'd like to add a "compose" button onto the .bottomBar of a .toolbar in my NavigationView.

Adding a Spacer() simply almost center aligns the item:

struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Hello, World!")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Spacer()
                            Button(action: { print("Pressed") }) {
                                Image(systemName: "plus.circle.fill")
                                    .imageScale(.large)
                                    .font(.title)
                            }
                        }
                    }
                }
        }
    }
}

This produces the following:

Not what I would have expected. What's even stranger is that that's not exactly center aligned, it's off by a few pixels.

So how do I:

1. Right align?

2. Center align?

Thanks

Answer 1

I had this same problem, here's what I found (Xcode 12.0 Beta 6)

Right Aligned

One way to do this is to use two .bottomBar items.

.toolbar(content: {
    ToolbarItem(placement: .bottomBar) {
        Spacer()
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})

A bit cleaner is to use a ToolbarItemGroup with a Spacer().

.toolbar(content: {
    ToolbarItemGroup(placement: .bottomBar) {
        Spacer()
        Button(action: {}) {
            Text("Add List")
        }
    }
})

Centered

To center an item you can use .status as the placement.

.toolbar(content: {
    ToolbarItem(placement: .status) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})

Answer 2

Every ToolbarItem have to include single view, so just move Spacer into separated toolbar item

Tested with Xcode 12b3

    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Spacer()
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { print("Pressed") }) {
                Image(systemName: "plus.circle.fill")
                    .imageScale(.large)
                    .font(.title)
            }
        }
    }

Note: to have it centered remove toolbar item with spacer