在 SwiftUI 中，常用的对齐方式主要应用在布局容器中，比如 HStack、VStack 和 ZStack，用来控制视图在布局中的对齐方式。下面是 SwiftUI 中常见的 对齐方式 和用法总结。
1、水平对齐方式（Horizontal Alignment）
适用于 VStack，用于控制内部视图的 水平方向 对齐。
常见的值：
1）.leading：靠左对齐。
2）.center：居中对齐。
3）.trailing：靠右对齐。
示例代码：
VStack(alignment: .leading) { // 左对齐
Text("Leading")
Text("Alignment")
}
.padding()
.background(Color.yellow)
VStack(alignment: .center) { // 居中对齐
Text("Center")
Text("Alignment")
}
.padding()
.background(Color.green)
VStack(alignment: .trailing) { // 右对齐
Text("Trailing")
Text("Alignment")
}
.padding()
.background(Color.blue)
2、垂直对齐方式（Vertical Alignment）
适用于 HStack，用于控制内部视图的垂直方向对齐。
常见的值：
1）.top：顶部对齐。
2）.center：垂直居中对齐。
3）.bottom：底部对齐。
示例代码：
HStack(alignment: .top) { // 顶部对齐
Text("Top Alignment")
.font(.largeTitle)
Text("SwiftUI")
.font(.caption)
}
.padding()
.background(Color.yellow)
HStack(alignment: .center) { // 垂直居中
Text("Center Alignment")
.font(.largeTitle)
Text("SwiftUI")
.font(.caption)
}
.padding()
.background(Color.green)
HStack(alignment: .bottom) { // 底部对齐
Text("Bottom Alignment")
.font(.largeTitle)
Text("SwiftUI")
.font(.caption)
}
.padding()
.background(Color.blue)
3、ZStack 中的对齐方式
ZStack 允许视图在同一空间内叠加，可以指定视图的对齐方式。
常见的值：
1）.topLeading：左上角对齐。
2）.top：顶部居中对齐。
3）.topTrailing：右上角对齐。
4）.leading：居左对齐（垂直居中）。
5）.center：完全居中对齐。
6）.trailing：居右对齐（垂直居中）。
7）.bottomLeading：左下角对齐。
8）.bottom：底部居中对齐。
9）.bottomTrailing：右下角对齐。
示例代码：
ZStack(alignment: .bottomTrailing) { // 右下角对齐
Rectangle()
.fill(Color.gray)
.frame(width: 200, height: 200)
Text("Bottom Trailing")
.padding()
.background(Color.blue)
.foregroundColor(.white)
}
4、文本基线对齐（Baseline Alignment）
适用于包含文本的视图，确保文本基线对齐。
常见的值：
1）.firstTextBaseline：按第一个文本的基线对齐。
2）.lastTextBaseline：按最后一个文本的基线对齐。
示例代码：
HStack(alignment: .lastTextBaseline) {
Text("SwiftUI")
.font(.largeTitle) // 大字体
Text("Baseline")
.font(.body) // 小字体
}
.padding()
.background(Color.yellow)
5、自定义对齐方式（Alignment Guides）
可以通过 alignmentGuide 来自定义视图的对齐方式。
示例代码：
HStack(alignment: .top) {
Text("SwiftUI")
.alignmentGuide(.top) { d in d[.top] } // 使用 top 对齐
Text("Custom Alignment")
.alignmentGuide(.top) { d in d[.bottom] } // 对齐到底部
}
.padding()
.background(Color.green)
为什么有两个对齐方式？
SwiftUI 的对齐机制涉及两个概念：
1、容器的对齐基准（Container Alignment）
容器（比如 VStack, HStack）提供一个对齐方式，比如 .leading、.trailing、.center 等。
容器会根据这个基准对其子视图进行布局。
2、子视图的对齐参考点（Child Alignment Guide）
子视图可以通过 alignmentGuide 修改它在容器中的对齐参考点。
这个方法会告诉容器：这个子视图应该用哪个边界或者位置作为对齐的参考。
如果Text有alignmentGuide，还会受HStack的alignment影响么？
答案是： 会受 HStack的 alignment影响，但 alignmentGuide可以重定义子视图的对齐参考点。
详细解释
HStack 的 alignment 是父容器提供的对齐基准，所有子视图在默认情况下都会依据这个对齐基准来布局。
当通过 alignmentGuide 修改子视图的对齐参考点时，alignmentGuide 会告知父容器如何计算该视图的对齐位置。
HStack 的 alignment 仍然是容器的对齐规则，但 alignmentGuide 会重写子视图如何参与到这个规则中。
HStack(alignment: .top) {
Text("SwiftUI")
.alignmentGuide(.top) { d in d[.top] } // 使用自身的 top 作为对齐点
Text("Custom Alignment")
.alignmentGuide(.top) { d in d[.bottom] } // 使用自身的 bottom 作为对齐点
}
1、HStack 的对齐基准是 .top：
HStack 会将所有子视图的 .top 作为默认的对齐参考点。
2、alignmentGuide 修改对齐参考点：
第一个 Text(“SwiftUI”)：
alignmentGuide(.top) 返回 d[.top]，表示使用默认的顶部对齐点，这没有修改任何行为。
第二个 Text(“Custom Alignment”)：
alignmentGuide(.top) 返回 d[.bottom]，表示将 底部 作为 HStack 的 .top 对齐点。
对于自定义对其方式，可以理解为alignmentGuide会修改对其的参考点，如果是d[.top]，其参考点就是top，如果是d[.trailing]，则参考点就是trailing。
当设置d[.bottom]时：
Text("SwiftUI")
.alignmentGuide(.top) { d in d[.bottom] } // 使用自身的 top 作为对齐点
但是需要注意的一点，那就是相关的使用场景：
HStack中尝试top、bottom的基准点；
VStack中尝试leading、trailing的基准点。
如果在HStack上下排序中使用leading，实际上并没有什么变化。
总结
在 SwiftUI 中，常用的对齐方式主要包括：
1、VStack（水平对齐：.leading、.center、.trailing）
2、HStack（垂直对齐：.top、.center、.bottom、文本基线对齐）
3、ZStack（垂直+水平组合对齐：如 .topLeading、.center、.bottomTrailing）
4、自定义对齐（alignmentGuide）
根据实际需要选择合适的对齐方式，确保布局的视觉效果和可读性。
