SwiftUI 简明教程之自定义对齐方式
本文为 Eul 样章，如果您喜欢，请移步 AppStore/Eul 查看更多内容。
Eul 是一款 SwiftUI & Combine 教程 App（iOS、macOS），以文章（文字、图片、代码）配合真机示例（Xcode 12+、iOS 14+，macOS 11+）的形式呈现给读者。笔者意在尽可能使用简洁明了的语言阐述 SwiftUI & Combine 相关的知识，使读者能快速掌握并在 iOS 开发中实践。
重写 alignmentGuide
SwiftUI 为我们提供了多种默认的对齐方式，如 .top，.bottom，.center 等。如下是将苹果的 logo 和 文字 “Apple” 对齐的代码：
HStack(alignment: .bottom) {
Image(systemName: "applelogo")
.font(.largeTitle)
Text("Apple")
}
如果我们想把文字 “Apple” 往上移动一些，换言之，文字的底部略高于于 logo 的底部。可以通过重写 alignmentGuide 实现：
HStack(alignment: .bottom) {
Image(systemName: "applelogo")
.font(.largeTitle)
.alignmentGuide(.bottom, computeValue: { d in d[.bottom] - 5})
Text("Apple")
}
computeValue 闭包中返回的是一个 ViewDimensions 结构体实例，它有 height、width 属性供我们使用，还可以通过下标获取指定的对齐方式。
上例我们简单演示了重写 alignmentGuide 的方法。当然，对于这种简单的情况，我们还可以使用 offset 实现：
HStack(alignment: .bottom) {
Image(systemName: "applelogo")
.font(.largeTitle)
.offset(x: 0, y: 5)
Text("Apple")
}
自定义 alignmentGuide
VStack {
HStack {
Text("手机")
Text("155********")
}
HStack {
Text("电子邮箱")
Text("xxxxxx@gmail.com")
}
}
如上是一个常见的界面，通常我们会使手机和邮箱右对齐（或者第二列的文字左对齐），通过系统默认的对齐方式，是无法实现的，我们需要自定义 alignmentGuide：
extension HorizontalAlignment {
struct CustomAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
return context[.trailing]
}
}
static let custom = HorizontalAlignment(CustomAlignment.self)
}
通过实现 AlignmentID 协议的方法，我们指定自定义的对齐方式为尾部对齐，然后我们使用自定义的对齐方式：
VStack(alignment: .custom) {
HStack {
Text("手机")
.alignmentGuide(.custom, computeValue: { $0[.trailing] })
Text("155********")
}
HStack {
Text("电子邮箱")
.alignmentGuide(.custom, computeValue: { $0[.trailing] })
Text("xxxxxx@gmail.com")
}
}
看看示例所示的效果，与我们的预期是一致的。
本文为 Eul 样章，如果您喜欢，请移步 AppStore/Eul 查看更多内容。
页:
[1]