在 SwiftUI 中对齐文本和图像

Question

下面的代码来自一个简单的 SwiftUI ContentView。它显示一段文本和一张图像，我希望它们沿其中心线垂直对齐。

var body: some View {
    HStack(alignment: .center) {
        Text("Cloudy")
            .background(Color.yellow)
        Image(systemName: "cloud.heavyrain")
            .background(Color.blue)
    }
    .font(.largeTitle)
    .border(Color.red)
}

相反，我发现它们似乎以框架为中心。对于文本来说，框架太大，对于图像来说，框架太小。

是否可以对齐内容（特别是图像 - 似乎没有边界）而不是框架？

Answer 1

图像可以有基线，虽然很多时候它们等于零，但也有一些其他情况（如“多云”），但基线不为零。如果将基线设置为零，那么它将以文本居中：

struct ContentView: View {

    var body: some View {
        HStack(alignment: .center) {
            Text("Cloudy").background(Color.yellow)
            Image(uiImage: UIImage(systemName: "cloud.heavyrain")!.withBaselineOffset(fromBottom: 0))
                .background(Color.blue)
        }
        .font(.largeTitle)
        .border(Color.red)
    }
}