将文字居中

Question

我有以下View：

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

这使我可以创建以下UI：

Spacer和HStack内部的Button是一个不错的技巧，它使按钮扩展到其父元素的宽度。但是，文本仍处于领先地位。

有人知道在按钮内部居中放置文本的方法吗？

Answer 1

您可以通过两种方式做到这一点，

1. 删除文本后的Spacer-这会将按钮缩小到 匹配txt大小。
2. 在文本前添加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(minWidth: 0, maxWidth: .infinity, alignment: .center).padding()
    .background(Color.green).cornerRadius(5)
  }
  ...
}