Spacer not working correctly inside Toolbar?

Question

Created Jul ’20

Replies 2

Boosts 0

Views 2.3k

Participants 3

I have a toolbar in which I want to place two buttons in leading and trailing positions, inside an HStack. When adding a Spacer the buttons are no longer visible. Without the Spacer it works (with the buttons being centred in the HStack)

Am I doing something wrong?

Code Block swiftText("Any View")      .toolbar {        ToolbarItem(placement: .bottomBar) {          HStack {            Spacer()            Button(action: {}, label: {              Text("Backlog")            })            Button(action: {}, label: {              Text("Add New")            })          }        }      }

Answered by OOPer in 623498022

Seems Spacer with other Views in ToolbarItem does not work as expected.

Please try this:

Code Block 						Text("Any View")								.toolbar {										ToolbarItem(placement: .bottomBar) {												Spacer()										}										ToolbarItem(placement: .bottomBar) {												Button(action: {}, label: {														Text("Backlog")												})										}										ToolbarItem(placement: .bottomBar) {												Button(action: {}, label: {														Text("Add New")												})										}								}

Boost

Answer 1

OOPer OP

Jul ’20

Accepted Answer

Seems Spacer with other Views in ToolbarItem does not work as expected.

Please try this:

Code Block 						Text("Any View")								.toolbar {										ToolbarItem(placement: .bottomBar) {												Spacer()										}										ToolbarItem(placement: .bottomBar) {												Button(action: {}, label: {														Text("Backlog")												})										}										ToolbarItem(placement: .bottomBar) {												Button(action: {}, label: {														Text("Add New")												})										}								}

2

Answer 2

OleWerger OP

Sep ’20

Hi, thanks for the hint, but if I try the following, the text will not be displayed only the icons :( Any idea?

code snippet:

Code Block .toolbar {                ToolbarItem(placement: .bottomBar) {                    Button(action: {}) {                        Label("Add", systemImage: "person.crop.circle.fill.badge.plus")                    }                }                ToolbarItem(placement: .bottomBar) {                    Spacer()                }                ToolbarItem(placement: .bottomBar) {                    Button(action: {}) {                        Label("Continue", systemImage: "chevron.right")                    }                }            }

0