swift 使Button跨越VStack

flmtquvp  于 2023-04-10  发布在  Swift
关注(0)|答案(8)|浏览(180)

我目前有以下SwiftUI视图:

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

我在Button中添加了一个.background(Color.green),如您所见,视图与文本非常贴合。
我想知道是否有一种方法可以调整按钮的宽度,使其填充整个VStack-类似于UIStackView.fill模式。

72qzrwbm

72qzrwbm1#

最好的方法是在按钮的内容上设置.frame(maxWidth: .infinity)

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

2019年的老答案:
你可以使用一个HStack和一个Text以及Spacer来得到一个Button,它填充了其父节点的宽度:

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

hujrc8aj2#

@d.felber的答案几乎是完整的,但是你需要在每一边都有一个Spacer()来居中:

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

abithluo3#

.frame(maxWidth: .infinity)

对我很有用。

2ledvvac

2ledvvac4#

Button中使用frame(maxWidth: .infinity)**如下:

Button(action: {...}) {
    Text("Sign In")
        .frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.tint(.green)

不是这样的,因为可敲击区域不会拉伸:

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

klsxnrf15#

如果你想坚持SwiftUI文档建议的方法,你需要使用GeometryReader并手动设置按钮宽度。几何阅读器会根据不同的设备和旋转更新其属性。

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

jucafojl6#

将按钮文本的框架设置为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)
                }
sz81bmfz

sz81bmfz7#

像这样的吗

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

pieyvz9o8#

我不确定是否有一个类似于UIStackView.fill方法,但是,如果你想做的是在Button(或任何视图)上提供一些间距,那么对我来说,要么设置frame,要么设置padding
.frame(width: 300, alignment: .center)(我们也可以在这里设置高度,但如果没有,它应该能够根据按钮文本推断高度。
如果你不想设置一个任意的宽度,你也可以使用import UIKitUIScreen来获得设备的全宽。(可能有一个SwiftUI的方法来获得这个,但目前还没有找到)

.frame(width: UIScreen.main.bounds.width, alignment: .center)

然后你可以加一点填充物来增加呼吸空间
.padding(.all, 20)
填充的问题是它会增加屏幕的额外宽度,所以我们在设置宽度时必须考虑到这一点。
(20* 从引导和尾随的两侧)

.frame(width: UIScreen.main.bounds.width - 40, alignment: .center)

(当文本覆盖到屏幕的末尾或您的对齐方式为.leading.trailing时,有喘息空间)

相关问题