在 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)
    }
}