具有SF Symbols的HStack图像未居中对齐

Question

我有这个简单的SwiftUI代码。我希望所有符号都像云符号一样居中对齐。

struct ContentView : View {
var body: some View {
    HStack(alignment: .center, spacing: 10.0) {
        Image(systemName: "cloud.sun")
        Image(systemName: "cloud")
        Image(systemName: "cloud.bolt")
        Text("Text")
        }.font(.title)
    }
}

但是，正如您在下面看到的那样，第一个和最后一个符号未居中。我是否缺少某些东西，或者这是一个错误？

干杯！

Answer 1

这是怎么回事。

Image视图没有调整大小。

看起来他们不知道其内在内容的大小，或者它报告了错误的值。

要修复：

struct ContentView : View {
    var body: some View {
        HStack(alignment: .center, spacing: 10.0) {
            Image(systemName: "cloud.sun")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.red)
            Image(systemName: "cloud")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.yellow)
            Image(systemName: "cloud.bolt")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .background(Color.pink)
            Text("Text").background(Color.green)
        }
        .frame(width: 250, height: 50)
        .background(Color.gray)
        .font(.title)

    }
}

...调整Images的大小，并确保纵横比设置为.fit，否则它们会拉伸。

还在HStack上设置边框，否则它将展开以填满整个屏幕。

@MartinR建议了一个更好的解决方案-通过UIImage创建图像-参见下面的评论。

struct ContentView : View {

    var body: some View {
        HStack {
            Image(uiImage: UIImage(systemName: "cloud.sun")!)
                .background(Color.red)
            Image(uiImage: UIImage(systemName: "cloud")!)
                .background(Color.yellow)
            Image(uiImage: UIImage(systemName: "cloud.bolt")!)
                .background(Color.pink)
            Text("Text").background(Color.green)
        }
        .background(Color.gray)
        .font(.title)

    }

}

输出：