带有 SF 符号的 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)

    }

}

输出：