Swift VStack - 灵活布局的视图容器

Swift VStack 是一种方便的视图容器，可帮助您轻松地处理和调整布局。VStack 可让您按照垂直方向依次放置视图，这使其非常适合处理具有顺序排列视图的布局。

创建 VStack

要创建一个 VStack，可以使用以下代码：

VStack {
    // 放置您的视图
}

在大括号中，您可以放置您想要的任何视图或其他的 VStack。

垂直展示视图

VStack 是按照垂直方向从上到下进行布局的。在 VStack 中添加一个视图就会将其放置在上一个视图下面。您可以添加任何类型的 SwiftUI 视图，包括文本，图像和按钮。例如：

VStack {
    Text("这是一条 SwiftUI 信息")
    Image(systemName: "swift")
    Button("点击按钮") {
        print("按钮被点击了")
    }
}

结果会让这三个视图垂直展示：

定制 VStack

VStack 提供许多选项，可轻松调整布局。以下是一些示例：

对齐

您可以使用 alignment 参数在 VStack 中设置所有视图的对齐方式。默认情况下，所有视图都是居中对齐。例如：

VStack(alignment: .leading) {
    Text("左对齐")
    Text("也是左对齐")
    Text("仍然左对齐")
}

这将使所有视图左对齐：

间距

通过 VStack 中的 spacing 参数，您可以自由调整在视图之间的间距。例如：

VStack(spacing: 20) {
    Text("间距可以通过 spacing 参数设置。")
    Image(systemName: "swift")
    Button("我距离上面的视图 20") {
        print("按钮被点击了。")
    }
}

这将简单地添加一个 20 点的空白区域:

内置填充

通过为 VStack 设置较小的填充，您可以将文本、图像或按钮从边框中心位置移开。例如：

VStack {
    Text("向上导航栏。")
    Spacer()
}.padding()

这将使 Stack 在上方和下方添加 10 点的填充:

总结

VStack 是一个非常方便的视图容器，可以让您轻松地按顺序垂直展示视图。您可以轻松地调整与视图相关的属性，如对齐方式和间距。这使 VStack 成为构建布局和 UI 的强大工具。