ToolbarItem placement problem: Button text is not centered

Question

mylaluna OP

Created Jun ’22

Replies 4

Boosts 0

Views 3.3k

Participants 2

I am trying to add a confirm button to the top-right of a text editor screen by using the SwiftUI toolbar.

I realised that the text in the button cannot be centered as long as the ToolbarItem placement is configured to set the item to the top-right of the screen.

Is this a bug?

Here is a sample code:

  
import SwiftUI
 
struct TestView: View {
  var body: some View {
     
    NavigationView {
      ZStack {
        Color(.black)
          .ignoresSafeArea()
        Text("Hello World")
          .foregroundColor(.white)
          .toolbarRole(.editor)
          .toolbar {
            ToolbarItem(placement: .confirmationAction) {
              Button(action: {print("confirm.")}) {
                Text("confirm")
              }
              .background(.yellow)
              .foregroundColor(.white)
              .cornerRadius(20.0)
            }
          }
      }
    }
  }
}
 
struct TestView_Previews: PreviewProvider {
  static var previews: some View {
    TestView()
  }
}
 
code-block

Answered by Claude31 in 718261022

Thanks for feedback and congrats for finding a solution. You should file a bug report, to understand.

Reason could be that in the toolbar, the button is itself in a container and alignment is relative to this outside container ?

Some explanations here: https://sarunw.com/posts/how-to-align-text-in-swiftui/

Boost

Answer 1

Claude31 OP

Jun ’22

Could you explain the problem and show what you get and what you expect.

I tested and get the text centered in button.

To see it better, I added a frame width for the text of button.

Button 2022-06-21 à 13.44.31.png

 struct TestView: View {
  var body: some View {
     
    NavigationView {
      ZStack {
        Color(.black)
          .ignoresSafeArea()
        Text("Hello World")
          .foregroundColor(.white)
          .toolbarRole(.editor)
          .toolbar {
            ToolbarItem(placement: .confirmationAction) {
              Button(action: {print("confirm.")}) {
                Text("confirm")
                      .frame(width: 100)
              }
              .background(.yellow)
              .foregroundColor(.white)
              .cornerRadius(20.0)
            }
          }
      }
    }
  }
}

0

Answer 2

mylaluna OP

Jun ’22

Thanks for the quick feedback.

In your image, the text is not entirely centered but right aligned.

To clarify myself, I removed the button corner radius and add the same button to the screen center. You can see in my attached screenshot the default text alignment is different between the two buttons. The button text in the toolbar is obviously right aligned (The last "m" is closer to the edge than the beginning "c"). I have tried a few different ToolBarItem placements. Placements like .confirmationAction or .navigationBarTrailing, etc. all have this behaviour.

In my opinion, it should be the button not the text that gets right aligned. If this is not a bug, what is the solution to this?

Screen Shot 2022-06-22 at 11.10.28 am.png

 import SwiftUI
 
struct TestView: View {
  var body: some View {
    NavigationView {
      ZStack {
        Color(.black)
          .ignoresSafeArea()
        Text("Hello World")
          .foregroundColor(.white)
          .toolbarRole(.editor)
          .toolbar {
            ToolbarItem(placement: .confirmationAction) {
              Button(action: {print("confirm.")}) {
                Text("confirm")
              }
              .background(.yellow)
              .foregroundColor(.white)
            }
          }
        Button(action: {print("confirm.")}) {
          Text("confirm")
        }
        .background(.yellow)
        .foregroundColor(.white)
        .offset(y: 20)
      }
 
    }
  }
}
 
struct TestView_Previews: PreviewProvider {
  static var previews: some View {
    TestView()
  }
}

1

Answer 3

mylaluna OP

Jun ’22

Following is a workaround which forces the center alignment to the text in the button of toolbar. However, I still need to know if this is a bug.

 Button(action: {print("confirm.")}) {
                Text("confirm")
                  .alignmentGuide(HorizontalAlignment.center, computeValue: { d in
                    d[HorizontalAlignment.center]
                  })
              }

2

Answer 4

Claude31 OP

Jun ’22

Accepted Answer

Thanks for feedback and congrats for finding a solution. You should file a bug report, to understand.

Reason could be that in the toolbar, the button is itself in a container and alignment is relative to this outside container ?

Some explanations here: https://sarunw.com/posts/how-to-align-text-in-swiftui/

0


	import SwiftUI

	struct TestView: View {
	var body: some View {

	NavigationView {
	ZStack {
	Color(.black)
	.ignoresSafeArea()
	Text("Hello World")
	.foregroundColor(.white)
	.toolbarRole(.editor)
	.toolbar {
	ToolbarItem(placement: .confirmationAction) {
	Button(action: {print("confirm.")}) {
	Text("confirm")
	}
	.background(.yellow)
	.foregroundColor(.white)
	.cornerRadius(20.0)
	}
	}
	}
	}
	}
	}

	struct TestView_Previews: PreviewProvider {
	static var previews: some View {
	TestView()
	}
	}

	code-block

	Button(action: {print("confirm.")}) {
	Text("confirm")
	.alignmentGuide(HorizontalAlignment.center, computeValue: { d in
	d[HorizontalAlignment.center]
	})
	}