3 types of stacks in SwiftUI
2023-10-22 本文已影响0人
_浅墨_
在 SwiftUI 有三种类型的 stack:HStack、VStack 和 ZStack。
VStack
VStack 允许我们从顶部到底部垂直堆叠视图,我们可以通过向VStack 添加对齐方式或间距来进一步自定义视图。
VStack(alignment: .leading, spacing: 16) {
Text("Hello, world!")
.font(.title)
Spacer()
Text("Second line")
}
HStack
HStack用于水平堆叠视图。与 VStack 类似,我们可以设置对齐方式和间距。
HStack(alignment: .bottom, spacing: 16) {
Text("Hello, world!")
.font(.title)
Spacer()
Text("Second line")
}
Spacer
在SwiftUI中,默认情况下,堆叠将占用最小空间并居中对齐。Spacer对于将内容推动到使用最大空间至关重要。它还可用于对齐元素。
HStack(alignment: .bottom, spacing: 16) {
Text("Hello, world!")
.font(.title)
Spacer()
Text("Second line")
}
.padding()
.frame(width: 320)
ZStack
ZStack非常适合重叠内容。它在三维平面上堆叠图层。由于元素可以浮在彼此之上,因此ZStack的对齐方式将移动所有项目。
ZStack(alignment: .topLeading) {
Rectangle()
.foregroundColor(.blue)
Text("Hello, world!")
.font(.title)
Spacer()
Text("Second line")
}
.padding()
.frame(width: 320)
参考: