Spacer not working correctly inside Toolbar?

Question

Created Jul ’20

Replies 2

Boosts 0

Views 2.1k

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