在 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

图像可以有基线，虽然很多时候它们等于零，但在其他一些情况下（如 "Cloudy"），它们不是。如果将基线设置为零，那么它将以文本为中心：

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

在 SwiftUI 中对齐文本和图像

Aligning texts and images in SwiftUI

swift

swiftui