在按钮中居中文本

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(maxWidth: .infinity, alignment: .center).padding()
    .background(Color.green).cornerRadius(5)
  }
  ...
}