Question

我目前具有以下SwiftUI视图：

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

我在.background(Color.green)上添加了Button，如您所见，视图非常贴近文本。

我想知道是否有一种方法可以调整按钮的宽度，以使其跨VStack填充，类似于.fill的{{1}}模式。

Answer 1

您可以将HStack与Text和Spacer一起使用，以得到一个Button，它可以填充其父对象的宽度：

Button(action: handleSignInAction) {
    HStack {
        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)

是我的把戏吗？

Answer 4

如果您想坚持使用SwiftUI文档的方法，建议您使用GeometryReader并手动设置按钮的宽度。几何读取器会针对不同设备以及在旋转时更新其属性。

GeometryReader { geometry in
     Button().frame(width: geometry.size.width, height: 100)
}

Answer 5

像这样吗？

              Button(action: {
                    // Do your login thing here
                }) {
                    Capsule()
                        .frame(height: 44)
                        .overlay(Text("Login").foregroundColor(Color.white)).padding()
                }

Answer 6

使按钮文本的框大小为UIScreen，然后在其后设置背景色（确保所有样式更改均在更改框架大小后完成，否则样式更改仅在原始默认框架上可见）。帧大小将向上传播，以将按钮的宽度也增加到屏幕的宽度。

Button(action: {
                // Sign in stuff
            }) {
                Text("Sign In")
                .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                .background(Color.green)
            }

您还可以在设置框架和背景之间添加一些负水平填充，以偏离屏幕边缘：

Button(action: {
                    // Sign in stuff
                }) {
                    Text("Sign In")
                    .frame(width: UIScreen.main.bounds.width, height: nil, alignment: .center)
                    .padding(.horizontal, -10.0)
                    .background(Color.green)
                }

使按钮跨过VStack

6 个答案: