我目前有以下SwiftUI视图:
HStack { ... VStack { TextField { ... } SecureField { ... } Button { ... } } ... }
我在Button中添加了一个.background(Color.green),如您所见,视图与文本非常贴合。我想知道是否有一种方法可以调整按钮的宽度,使其填充整个VStack-类似于UIStackView的.fill模式。
Button
.background(Color.green)
VStack
UIStackView
.fill
72qzrwbm1#
最好的方法是在按钮的内容上设置.frame(maxWidth: .infinity)。
.frame(maxWidth: .infinity)
Button(action: handleSignInAction) { Text("Sign In") .frame(maxWidth: .infinity) } .background(Color.green)
2019年的老答案:你可以使用一个HStack和一个Text以及Spacer来得到一个Button,它填充了其父节点的宽度:
HStack
Text
Spacer
Button(action: handleSignInAction) { HStack { Spacer() Text("Sign In") Spacer() } }.background(Color.green)
hujrc8aj2#
@d.felber的答案几乎是完整的,但是你需要在每一边都有一个Spacer()来居中:
Spacer()
Button(action: { // TODO: ... }) { HStack { Spacer() Text("Sign In") Spacer() } }
abithluo3#
对我很有用。
2ledvvac4#
在Button中使用frame(maxWidth: .infinity)**如下:
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)
klsxnrf15#
如果你想坚持SwiftUI文档建议的方法,你需要使用GeometryReader并手动设置按钮宽度。几何阅读器会根据不同的设备和旋转更新其属性。
GeometryReader { geometry in Button().frame(width: geometry.size.width, height: 100) }
jucafojl6#
将按钮文本的框架设置为UIScreen的大小,然后在其后面设置背景颜色(确保所有样式更改都是在更改框架大小之后 * 完成的,否则样式更改将仅在原始默认框架上可见)。框架大小将向上传播,以将按钮的宽度增加到屏幕的宽度。
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) }
sz81bmfz7#
像这样的吗
Button(action: { // Do your login thing here }) { Capsule() .frame(height: 44) .overlay(Text("Login").foregroundColor(Color.white)).padding() }
pieyvz9o8#
我不确定是否有一个类似于UIStackView的.fill方法,但是,如果你想做的是在Button(或任何视图)上提供一些间距,那么对我来说,要么设置frame,要么设置padding。.frame(width: 300, alignment: .center)(我们也可以在这里设置高度,但如果没有,它应该能够根据按钮文本推断高度。如果你不想设置一个任意的宽度,你也可以使用import UIKit和UIScreen来获得设备的全宽。(可能有一个SwiftUI的方法来获得这个,但目前还没有找到)
frame
padding
.frame(width: 300, alignment: .center)
import UIKit
.frame(width: UIScreen.main.bounds.width, alignment: .center)
然后你可以加一点填充物来增加呼吸空间.padding(.all, 20)填充的问题是它会增加屏幕的额外宽度,所以我们在设置宽度时必须考虑到这一点。(20* 从引导和尾随的两侧)
.padding(.all, 20)
.frame(width: UIScreen.main.bounds.width - 40, alignment: .center)
(当文本覆盖到屏幕的末尾或您的对齐方式为.leading或.trailing时,有喘息空间)
.leading
.trailing
8条答案
按热度按时间72qzrwbm1#
最好的方法是在按钮的内容上设置
.frame(maxWidth: .infinity)
。2019年的老答案:
你可以使用一个
HStack
和一个Text
以及Spacer
来得到一个Button
,它填充了其父节点的宽度:hujrc8aj2#
@d.felber的答案几乎是完整的,但是你需要在每一边都有一个
Spacer()
来居中:abithluo3#
对我很有用。
2ledvvac4#
在
Button
中使用frame(maxWidth: .infinity)
**如下:不是这样的,因为可敲击区域不会拉伸:
klsxnrf15#
如果你想坚持SwiftUI文档建议的方法,你需要使用GeometryReader并手动设置按钮宽度。几何阅读器会根据不同的设备和旋转更新其属性。
jucafojl6#
将按钮文本的框架设置为
UIScreen
的大小,然后在其后面设置背景颜色(确保所有样式更改都是在更改框架大小之后 * 完成的,否则样式更改将仅在原始默认框架上可见)。框架大小将向上传播,以将按钮的宽度增加到屏幕的宽度。您还可以在设置框架和背景之间添加一些负水平填充,以便从屏幕边缘偏移:
sz81bmfz7#
像这样的吗
pieyvz9o8#
我不确定是否有一个类似于
UIStackView
的.fill
方法,但是,如果你想做的是在Button
(或任何视图)上提供一些间距,那么对我来说,要么设置frame
,要么设置padding
。.frame(width: 300, alignment: .center)
(我们也可以在这里设置高度,但如果没有,它应该能够根据按钮文本推断高度。如果你不想设置一个任意的宽度,你也可以使用
import UIKit
和UIScreen
来获得设备的全宽。(可能有一个SwiftUI的方法来获得这个,但目前还没有找到)然后你可以加一点填充物来增加呼吸空间
.padding(.all, 20)
填充的问题是它会增加屏幕的额外宽度,所以我们在设置宽度时必须考虑到这一点。
(20* 从引导和尾随的两侧)
(当文本覆盖到屏幕的末尾或您的对齐方式为
.leading
或.trailing
时,有喘息空间)