使按钮跨越VStack

Question

我目前有以下SwiftUI视图：

HStack {
  ...
  VStack {
    TextField { ... }
    SecureField { ... }
    Button { ... }
  }
  ...
}

​

​

我向.background(Color.green)添加了一个Button，正如您所看到的，视图非常适合文本。

我想知道是否有一种方法来调整按钮的宽度，使其在整个VStack中填充--类似于UIStackView的.fill模式。

Answer 1

最好的方法是通过.frame(maxWidth: .infinity) https://developer.apple.com/documentation/swiftui/view-layout。

如果希望按钮不居中，则需要指定alignment。

例如：.frame(maxWidth: .infinity, alignment: .leading)

Button(action: handleSignInAction) {
    Text("Sign In")
}
.frame(maxWidth: .infinity)
.background(Color.green)

2019年的旧答案：

您可以使用带有HStack和Text和Spacer的Button来获取一个填充其父级宽度的Button：

Button(action: handleSignInAction) {
    HStack {
        Spacer()
        Text("Sign In")
        Spacer()
    }
}.background(Color.green)

Answer 2

@d.felber的答案几乎已经完成，但是您需要在每一侧都有一个Spacer()来进行中间操作：

Button(action: {
    // TODO: ...
}) {
    HStack {
        Spacer()
        Text("Sign In")
        Spacer()
    }
}

Answer 3

.frame(maxWidth: .infinity)

为我做了个小把戏。