实际上,它是正确对齐的,添加背景到每个 Text 你会发现 是否正确对齐

结果是:

1) 两者的对齐

• 把他们两个放在一起 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:我添加了背景来显示每个视图的真实帧

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

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