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