【问题标题】：When there are different sized Text in a HStack, top alignment doesn’t apply to larger sized text当 HStack 中有不同大小的文本时，顶部对齐不适用于较大的文本
【发布时间】：2021-04-03 17:10:17
【问题描述】：

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

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

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

【问题讨论】：

它是正确对齐的。您观察到的只是这种字体的性质。您可以在每个文本后面添加一些背景颜色以自己查看。
注意，谢谢。尽管我找到了解决方法，但如果/当我将来遇到此问题或类似问题时，我必须提醒自己这种可能性。

标签： ios text swiftui alignment hstack

【解决方案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 : 我添加了背景来显示每个视图的真实帧

【讨论】：

哇，太棒了！很有魅力，最重要的是，它的灵活性非常方便。

【解决方案2】：

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

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

【讨论】：

是的，我应该在顶部提到它，但我知道我可以通过设置填充或偏移来强制执行我所追求的，但我不认为这是一个灵活的解决方案考虑不同的字体/显示大小。还是谢谢！

1) 两个Text对齐

2) 图片与文字对齐：

1) 两个`Text`对齐