CODEWITHSUNDEEP
swiftui
blu-Fox
blu-Fox

Reputation: 656

SwiftUI: Text mis-alignment when inside Button (bug?)

So this is a weird one, and it looks like a bug. When placed inside a button, title that cannot fit on one line mis-aligns. It should be aligned to the left, but shows up centered.

Everything latest, XCode 13.2.1

MRE is below, any tips much appreciated!

HStack {

  HStack{
    Image(systemName: "square.and.pencil")
      .resizable()
      .scaledToFit()
      .frame(width: 20, height: 20)
    Text("Some kind of title") // <- aligned properly
      .fontWeight(.bold)
      .minimumScaleFactor(0.2)
  } //: HStack
    .padding(.horizontal, 12)
    .frame(maxWidth: .infinity, alignment: .leading)
    .frame(height: 35)
    .font(.headline)
    .foregroundColor(Color.green)
    .background(Color.green.opacity(0.2))
    .cornerRadius(6)
                
  Button(action: {
    // some action
  }){
    HStack{
      Image(systemName: "square.and.pencil")
        .resizable()
        .scaledToFit()
        .frame(width: 20, height: 20)
      Text("Some kind of title") // <- not aligned properly
        .fontWeight(.bold)
        .minimumScaleFactor(0.2)
    } //: HStack
      .padding(.horizontal, 12)
      .frame(maxWidth: .infinity, alignment: .leading)
      .frame(height: 35)
      .font(.headline)
      .foregroundColor(Color.green)
      .background(Color.green.opacity(0.2))
      .cornerRadius(6)
  } //: Button

} //: HStack

Second row is misaligned

Upvotes: 0

Views: 359

Answers (1)

tromgy
tromgy

Reputation: 5803

You can fix it by adding the multilineTextAlignment modifier to the Text view:

Button(action: {
    // some action
  }){
    HStack{
      Image(systemName: "square.and.pencil")
        .resizable()
        .scaledToFit()
        .frame(width: 20, height: 20)
      Text("Some kind of title")
        .fontWeight(.bold)
        .minimumScaleFactor(0.2)
        .multilineTextAlignment(.leading) // <- will align to the left
    } //: HStack
      .padding(.horizontal, 12)
      .frame(maxWidth: .infinity, alignment: .leading)
      .frame(height: 35)
      .font(.headline)
      .foregroundColor(Color.green)
      .background(Color.green.opacity(0.2))
      .cornerRadius(6)
  } //: Button

As to why it happens, I have a theory. By default Text on buttons is centered, while plain Text by default is left-aligned. I didn't see it explicitly mentioned in the documentation, but a simple experiment shows this behavior:

Screen shot of Text vs Button

Upvotes: 1

Related Questions