swiftUI笔记之Stacks

发表于 更新于 阅读次数： 阅读次数：

SwiftUI 中的 Stacks 类似于 UIKit 中的 stack views。通过组合水平和垂直的方式排列视图构建更复杂的应用界面。Stacks 有 3 种类型：HStack、VStack 和 ZStack。

VStack

VFyRLT

可以通过 VStack 从上到下垂直堆叠视图，同时我们可以进一步添加alignment（对齐方式）或间距（spacing）来进一步自定义视图。

1
2
3
4
5
6
VStack(alignment: .leading, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

HStack

CE5YPH
HStack 用于水平堆叠视图。就像 VStack 一样，您可以设置对齐方式和间距进一步自定义视图

1
2
3
4
5
6
HStack(alignment: .bottom, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

ZStack

zPp77c
ZStack 类似设计软件的层概念，元素都是在一个视图上进行堆叠的，类似在三维立体空间堆叠视图，由于元素可以相互浮动，因此 ZStack 的对齐方式会将所有项目移到一个位置。

1
2
3
4
5
6
7
8
9
10
ZStack(alignment: .topLeading) {
    Rectangle()
        .foregroundColor(.blue)
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}
.padding()
.frame(width: 320)