mimo
mimo

Reputation: 871

How to make TextField align right (trailing)

I am trying to have the value of a TextField displayed with trailing alignment.

As you can see the value 34.3 is display with leading alignment.

I am sure I am missing something obvious but I can't figure out what. Any ideas?

@State private var endwert = 34.3

var numberFormatter: NumberFormatter {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    formatter.locale = Locale.current
    return formatter
}

...

HStack {

  Text("Endwert")
    .frame(width: nil, height: nil, alignment: .topTrailing)
    .background(Color .green)

  Spacer()

  TextField($endwert, formatter: numberFormatter)
    .background(Color.yellow)
    .frame(width: nil, height: nil, alignment: .trailing)

  Text("m2")
}

wich looks like this

Upvotes: 72

Views: 30956

Answers (1)

M Reza
M Reza

Reputation: 19758

Add .multilineTextAlignment(.trailing) to your TextField:

TextField($endwert, formatter: numberFormatter)
  .multilineTextAlignment(.trailing)
  ...

Which results in:

enter image description here

Upvotes: 150

Related Questions