当 HStack 中有不同大小的文本时，顶部对齐不适用于较大的文本

Question

我有一个包含多个元素的 HStack，特别是两个具有不同字体大小的 Text。我希望两个文本都与视图的顶部对齐。

HStack(alignment: .top) {
    Image(systemName: "cloud.drizzle.fill")
    Text("14°")
        .font(.largeTitle)
    Text("86%")
        .font(.callout)
    Spacer()
}

然而，第一个（较大的）Text 输出低于其他两个：

Answer 1

其实是对齐的，给每个Text加上背景，你会发现Text的边框都对齐了

但为了解决您正在寻找的案例，我通过一些计算为您做了一些破解

结果：

1) 两者对齐Text

• 将它们合二为一 HStack ， alignment: .firstTextBaseline
• 然后播放第二个文本，添加 baselineOffset 和 (bigFont.capHeight - smallFont.capHeight)

您可以了解有关字体的更多信息，但您需要的主要信息是：

因此您的代码将是：

 HStack(alignment: .firstTextBaseline) {
                Text("14°")
                    .font(Font(bigFont))
                    .background(Color.blue)
                
                Text("86%")
                    .font(Font(smallFont))
                    .baselineOffset((bigFont.capHeight - smallFont.capHeight))
                    .background(Color.yellow)
                Spacer()
            }

2) 将图像与文本对齐：

• 通过添加等于 bigFont.lineHeight-bigFont.ascender 的填充（回到上面的图片，看看我是如何计算的）

最终代码：

struct ContentView: View {
    @State var pickerSelection = ""
    
    let bigFont = UIFont.systemFont(ofSize: 50)
    let smallFont = UIFont.systemFont(ofSize: 15)
    
    var body: some View {
        HStack(alignment:.top) {
            Image(systemName: "cloud.drizzle.fill")
                .background(Color.red)
                .padding(.top, bigFont.lineHeight-bigFont.ascender)
            HStack(alignment: .firstTextBaseline) {
                Text("14°")
                    .font(Font(bigFont))
                    .background(Color.blue)
                
                Text("86%")
                    .font(Font(smallFont))
                    .baselineOffset((bigFont.capHeight - smallFont.capHeight))
                    .background(Color.yellow)
                Spacer()
            }
        }
    }
}

PS : 我添加了背景以显示每个视图的真实帧

Answer 2

目前文本按顶部对齐。但是大文本的上升高度大于小文本。所以对齐不是文本的顶部。 不幸的是，SwiftUI 不支持文本顶部对齐。 但是您可以像下面的代码一样手动对齐文本的顶部。

HStack(alignment: .top) {
    Image(systemName: "cloud.drizzle.fill")
    Text("14°")
        .font(.largeTitle).padding(.top, -5.0)
    Text("86%")
        .font(.callout)
    Spacer()
}