SwiftUI VStack 对齐

在 SwiftUI 中，VStack 是纵向排列视图的一种常用方式。但是，当我们需要对齐它们时，往往需要一些额外的技巧。

基础对齐方式

首先，让我们看一下 VStack 的基本对齐方式。在默认情况下，VStack 会根据其内部子视图的大小垂直居中对齐。例如：

VStack {
    Text("First Item")
    Text("Second Item")
}

这将在屏幕居中显示两个文本视图。

对齐到顶部

如果我们想要将视图向顶部对齐，我们可以添加一个 Spacer 视图：

VStack {
    Text("First Item")
    Text("Second Item")
    Spacer()
}

这将在屏幕顶部显示两个文本视图。

对齐到底部

类似地，我们可以通过在 VStack 中添加一个固定大小的 Spacer 对象来将视图底部对齐：

VStack {
    Spacer()
    Text("First Item")
    Text("Second Item")
}

这将在屏幕底部显示两个文本视图。

对齐到左侧或右侧

VStack 内部的子视图默认都是居中对齐的，但是我们可以通过在视图中使用 alignment 属性来改变对齐方式。例如，以下代码将在屏幕左侧对齐两个文本视图：

VStack(alignment: .leading) {
    Text("First Item")
    Text("Second Item")
}

同样的，我们可以使用 .trailing 来右对齐：

VStack(alignment: .trailing) {
    Text("First Item")
    Text("Second Item")
}

自定义对齐方式

最后，如果我们需要更精细的对齐控制，我们可以使用 alignmentGuide 方法。这个方法将接收一个对齐键和一个闭包，该闭包将返回可以在该键中使用的自定义对齐值。

例如，在以下示例中，我们使用 alignmentGuide 来将第一个文本视图向上对齐，而将第二个文本视图向下对齐：

VStack(alignment: .leading) {
    Text("First Item")
    Text("Second Item")
        .alignmentGuide(.top) { d in d[.bottom] }
    Spacer()
}

这将在屏幕上显示两个文本视图，它们的顶部和底部分别对齐到向上和向下的自定义键。

结论

在 SwiftUI 中，我们有多种方式来控制 VStack 的对齐方式。从基本的顶部和底部对齐到更复杂的自定义对齐方法，我们可以使用这些技巧来确保我们的视图始终按我们希望的方式排列。