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

Question

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

\n

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

\n

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

\n

\n

Answer 1

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

\n

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

\n

结果：

\n

\n

1）两者的对齐Text

\n

\n
• 将它们两者合而为一HStack，alignment: .firstTextBaseline
\n
• baselineOffset然后通过添加with来播放第二个文本(bigFont.capHeight - smallFont.capHeight)
\n

\n

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

\n

\n

所以你的代码将是：

\n

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

\n

2）将图像与文本对齐：

\n

\n
• 通过添加一个等于的填充bigFont.lineHeight-bigFont.ascender（返回到顶部的图片，看看我是如何计算它的）
\n

\n

最终代码：

\n

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

\n

PS：我添加了背景来向您展示每个视图的真实框架

\n