按钮中的中心文本

Question

我有以下 View:

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

这允许我创建以下 UI:

HStack 和 Button 中的 Spacer 是一个很好的 hack，它使按钮扩展到其父按钮的宽度。然而，正文仍然坐在领先地位。

有人知道将按钮内的文本居中的方法吗？

Answer 1

您可以通过两种方式完成，

删除文本后的 Spacer - 这会将按钮缩小到匹配 txt 大小。
在正文前加一个Spacer。喜欢

代码：

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

Answer 2

HStack {
  ...
  VStack {
    ...
    Button("Sign In") {
        model.signIn()
    }
    .frame(maxWidth: .infinity, alignment: .center).padding()
    .background(Color.green).cornerRadius(5)
  }
  ...
}

按钮中的中心文本

Center Text in a Button

swift

swiftui