在 SwiftUI 中,如何在不依赖幻数的情况下将
Image
和 Text
顶部对齐?
此代码:
HStack(alignment: .top) {
Text("50")
.font(.largeTitle)
Image(systemName: "arrow.up.right.circle.fill")
.font(.caption)
.foregroundStyle(.gray.opacity(0.7))
}
导致图像未正确对齐:
我可能可以通过使用幻数在图像上设置填充来解决这个问题,但我想避免这种情况。
通过向文本添加
.border
,我们可以看到 Text
有一些垂直填充,并且图像 is 确实与该边框的顶部对齐。
顶部填充用于容纳比平时更高的字符。例如
在这种情况下,图像将与环形变音符号对齐。
底部填充将用于容纳字形,例如有一个下降部分,如 y
重点是,文本的物理高度取决于文本中的字形,如果图像始终与文本的“物理”顶部对齐,则会很不和谐。考虑
HStack(alignment: .top) {
Text("Å")
Image("image1")
Text("A")
Image("image2")
Text("x")
Image("image3")
}
您期望这三幅图像的垂直位置是多少?如果它们的顶部都与文本的物理顶部对齐,则文本的基线将不会对齐。如果基线
对齐,则图像不能全部与文本的物理顶部对齐,因为它们都有不同的高度。
你正在与系统作斗争。归根结底,使用幻数是不可避免的,字体可以以他们想要的任何物理高度显示每个字符。您必须进入字体文件并查看向量才能计算字形的物理高度。
在“50”这个特定情况下(所有字符都在大写高度)并且字体是系统字体,看起来顶部填充与底部填充相同。从技术上讲,您可以在没有幻数的情况下做到这一点。通过从底部 y 减去基线 y 来计算底部填充,并将文本的
.top
对齐参考线移动那么多。
Text("50A")
.font(.largeTitle)
.border(.red)
.alignmentGuide(.top) {
$0[.top] + $0[.bottom] - $0[.lastTextBaseline]
}