我正在尝试创建两个按钮,宽度相等,位置一个在另一个之上,垂直。它应该看起来像这样:
我在一个VStack
里面放了2个Buttons
,它会自动扩展到更大按钮的宽度。我试图做的是让按钮的宽度扩展到VStack
的宽度,但这是我得到的结果:
VStack(alignment: .center, spacing: 20) {
NavigationLink(destination: CustomView()) {
Text("Button")
}.frame(height: 44)
.background(Color.primary)
Button(action: { self.isShowingAlert = true }) {
Text("Another Button")
}.frame(height: 44)
.background(Color.primary)
}.background(Color.secondary)
设置VStack
的宽度会将其展开,但按钮不会展开以适合:
VStack(alignment: .center, spacing: 20) {
...
}.frame(width: 320)
.background(Color.secondary)
所以我的问题是:
除了手动设置版面中每个项目的框架外,是否还有其他方法可以实现此操作?
我宁愿不必指定每一个,因为它将变得难以管理。
3条答案
按热度按时间dgtucam11#
将
.infinity
设置为maxWidth
,frame(minWidth: maxWidth: minHeight:)
API可用于扩展子视图以填充:tvz2xvvm2#
您必须在按钮内部的
Text
上使用带有maxWidth: .infinity
的框架修饰符,这将强制Button
尽可能变宽:这在iOS中有效,但在使用默认按钮样式的macOS中无效。macOS使用AppKit的
NSButton
,因为它拒绝变宽(或变高)。macOS中的技巧是在按钮上使用.buttonStyle()
修饰符(或NavigationLink
),然后创建自己的自定义按钮样式,如下所示:之所以必须将框架修饰符应用于
Text
视图而不是按钮本身,是因为按钮更喜欢保持其内容的大小,而不是包含按钮的视图建议的大小。这意味着如果将框架修饰符应用于按钮而不是按钮内部的Text
,按钮实际上将保持与Text
相同的大小,并且.frame
返回的视图将扩展以填充包含它的视图的宽度,因此您将无法在Text
视图的边界之外点击/单击按钮。oipij1gg3#
如果您希望匹配VStack的动态宽度,即:只占用它所需的空间(基于子视图的动态宽度)。您可以通过向父VStack添加
.fixedSize(horizontal:,vertical:)
修饰符来实现这一点。示例: