如何在 SwiftUI 中顶部对齐图像和文本而不依赖幻数？

Question

在 SwiftUI 中，如何在不依赖幻数的情况下将

Image

和

Text

顶部对齐？

此代码：

HStack(alignment: .top) {
    Text("50")
        .font(.largeTitle)

    Image(systemName: "arrow.up.right.circle.fill")
        .font(.caption)
        .foregroundStyle(.gray.opacity(0.7))
}

导致图像未正确对齐：

我可能可以通过使用幻数在图像上设置填充来解决这个问题，但我想避免这种情况。

Answer 1

通过向文本添加

.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]
    }