Центр текста в кнопке

Question

У меня есть следующее View:

HStack {
  ...
  VStack {
    ...
    Button(action: model.signIn) {
      HStack {
        Text("Sign In")
        Spacer()
      }
    }.relativeHeight(2).background(Color.green).cornerRadius(5)
  }
  ...
}

Это позволяет мне создать следующий пользовательский интерфейс:

Spacer внутри HStack и Button был хорошим хаком, который заставил кнопку простираться на ширину родительского элемента.Тем не менее, текст по-прежнему сидит на лидирующей позиции.

Кто-нибудь знает способ центрировать текст внутри кнопки?

Answer 1

Вы можете сделать это двумя способами:

1. Удалите Spacer после текста - это уменьшит размер кнопки до размера текста.
2. Добавьте Spacerдо текста.как

код:

HStack {
  ...
  VStack {
    ...
    Button(action: model.signIn) {
      HStack {
        Spacer()
        Text("Sign In")
        Spacer()
      }
    }.relativeHeight(2).background(Color.green).cornerRadius(5)
  }
  ...
}