Spacer not working correctly inside Toolbar?

Question

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")
            })
          }
        }
      }

SwiftUI

924

Posted by

dev.capps.tech

Reply

Add a Comment

Answer 1

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")
												})
										}
								}

Posted by

OOPer

Add a Comment

Answer 2

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")
												})
										}
								}

Posted by

OOPer

Add a Comment

Answer 3

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")
                    }
                }
            }

Posted by

OleWerger

Add a Comment

Spacer not working correctly inside Toolbar?

Accepted Reply

Replies