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

Question

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

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

但是，第一个（较大的）Text在其他两个下方输出：

Answer 1

实际上它对齐正确，为每个添加背景Text，您会发现框架Text对齐正确

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

结果：

1）两者的对齐Text

• 将它们合二为一HStack，与alignment: .firstTextBaseline
• baselineOffset然后通过添加一个with来播放第二个文本(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()
}