SwiftUI 基础组件 - VStack

在 SwiftUI 中，VStack 是一种用于将视图垂直排列的容器。它会按照从上到下的顺序显示它包含的所有子视图。VStack 是 SwiftUI 布局中最常用的容器之一，与 HStack（水平布局）和 ZStack（叠加布局）一起使用时可以实现各种复杂布局。

基本使用

一个简单的 VStack 示例代码如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("标题")
                .font(.title)
            Text("子标题")
                .font(.subheadline)
            Text("文章内容")
                .font(.caption)
        }
    }
}

在上述代码中，VStack 按顺序垂直排列了三个 Text 视图，效果图如下：

VStack 支持自定义对齐方式和间距： • alignment：指定子视图的对齐方式（如左对齐、居中对齐等）。 • spacing：设置子视图之间的间距。

代码示例如下：

VStack(alignment: .leading, spacing: 20) {
    Text("标题1")
        .font(.title)
    Text("子标题1")
        .font(.subheadline)
    Text("文章内容111111111111")
        .font(.caption)
}

在上述代码中，通过给 alignment 属性赋值为 .leading 将 VStack 中的子视图左对齐，给 spacing 属性赋值为 20，设置子视图之间的间距为 20。效果图如下：

我们也可以给 VStack 添加一个 frame 来控制容器大小，并选择将内容居中对齐：

VStack {
    Text("内容")
}
.frame(width: 200, height: 200)
.background(Color.gray.opacity(0.2))

效果图如下：