给定以下代码:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.lineLimit(nil)
.font(.body)
Spacer()
}
.background(Color.red)
}
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
它的结果是这个接口:
我怎样才能使VStack填充屏幕的宽度,即使标签/文本组件不需要全宽度?
我发现的一个技巧是在结构中插入一个空的HStack,如下所示:
VStack(alignment: .leading) {
HStack {
Spacer()
}
Text("Title")
.font(.title)
Text("Content")
.lineLimit(nil)
.font(.body)
Spacer()
}
产生所需的设计:
有没有更好的办法?
尝试使用下面选项的.frame修饰符:
.frame(
minWidth: 0,
maxWidth: .infinity,
minHeight: 0,
maxHeight: .infinity,
alignment: .topLeading
)
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Hello World")
.font(.title)
Text("Another")
.font(.body)
Spacer()
}
.frame(
minWidth: 0,
maxWidth: .infinity,
minHeight: 0,
maxHeight: .infinity,
alignment: .topLeading
)
.background(Color.red)
}
}
这被描述为一个灵活的框架(请参阅文档),它将拉伸以填充整个屏幕,当它有额外的空间时,它将在其中居中其内容。
编辑:答案更新为使用.frame的简单(更好)方法
只要使用帧修饰器!
struct Expand: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.lineLimit(nil)
.font(.body)
}
.frame(maxWidth:.infinity,maxHeight:.infinity,alignment:.topLeading)
.background(Color.red)
}
}
注意-你甚至不需要VStack中的spacer !
注意2:如果你不想在顶部和底部使用白色,那么在背景中使用:
Color.red.edgesIgnoringSafeArea(.all)