Stack Layout

Stack 视图是 SwiftUI 中最原始的布局容器。使用堆栈将视图集合分组为水平布局或垂直布局，或将它们堆叠在一起。

HStack 将视图以水平方式布局，VStack 将视图以垂直方式布局，ZStack 将视图以堆叠方式布局。

HStack

HStack 可将子视图以水平排列的方式展示。

创建方法：

1init(
2    alignment: VerticalAlignment = .center, // 垂直对其方式 top:顶部对齐 bottom:底部对齐 center:垂直居中
3    spacing: CGFloat? = nil, // 子视图之间的间距
4    @ViewBuilder content: () -> Content // 视图构建器
5)

使用示例：

1var body: some View {
2    HStack(alignment: .top, spacing: 10) {
3        SomeView()
4        SomeView()
5        SomeView()
6    }
7}

Note

当 HStack 中有大量的子视图，进行加载时，可能会导致性能问题。可以使用 LazyHStack 来替代 HStack，它会按需加载子视图，从而提高性能。

VStack

VStack 可将子视图以垂直排列的方式展示。

创建方法

1init(
2    alignment: HorizontalAlignment = .center, // 水平对其方式 leading:左对齐 trailing:右对齐 center:水平居中
3    spacing: CGFloat? = nil, // 视图之间的间距
4    @ViewBuilder content: () -> Content // 视图构建器
5)

使用示例：

1VStack(alignment: .leading, spacing: 16) {
2    SomeView()
3    SomeView()
4    SomeView()
5}

ZStack

ZStack 可将子视图以堆叠方式展示

创建方法

1init(
2    alignment: Alignment = .center, //对齐方式     
3    @ViewBuilder content: () -> Content //视图构建器
4)

Alignment 对齐方式枚举

center: 居中对齐

leading: 左对齐

trailing: 右对齐

top: 上对齐

bottom: 下对齐

topLeading: 左上对齐

topTrailing: 右上对齐

bottomLeading: 左下对齐

bottomTrailing: 右下对齐

使用示例：

1ZStack(alignment: .topLeading) {
2    Circle().frame(width: 200, height: 200)
3    Circle().frame(width: 150, height: 150).foregroundColor(.accentColor)
4    Circle().frame(width: 100, height: 100).foregroundColor(.blue)
5    Circle().frame(width: 50, height: 50).foregroundColor(.red)
6}
7.border(Color.green, width: 1)