swift - 带有 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)

    }

}

输出：

Answer 2

我遇到了和你一样的问题：SF Symbols 没有在 iOS 13 上报告正确的内容大小。（虽然，它在 iOS 14 及更高版本上已修复。）

使用UIImageMatteo Pacinis 解决方案中提出的问题是与 SwiftUI 动态的兼容性差：前景色和字体大小（以及动态类型！）不是简单地取自当前 SwiftUI 上下文，而是必须复制到UIImage配置中（使用UIImage(systemName:, withConfiguration:)）这通常是不切实际的。（请参阅hackingwithswift.com了解如何使用它）。

看着上面的问题，我提出以下解决方案：

HStack(alignment: .center, spacing: 10.0) {
    Image(systemName: "cloud.sun")
        .hidden()
        .overlay(
            Image(systemName: "cloud.sun")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .background(Color.red)
        )
    Image(systemName: "cloud")
        .hidden()
        .overlay(
            Image(systemName: "cloud")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .background(Color.yellow)
        )
    Image(systemName: "cloud.bolt")
        .hidden()
        .overlay(
            Image(systemName: "cloud.bolt")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .background(Color.pink)
        )
    Text("Text")
        .background(Color.green)
}
.background(Color.gray)
.font(.title)

它看起来像很多代码重复，但它有一个优点，符号根据您的缩放font，尊重foregroundColor修饰符并根据您的需要对齐alignment

输出：

但是这种方法仍然存在一些问题：图像仍然没有正确的固有尺寸，符号只是“很好地居中”绘制。这意味着HStack仍然的高度取决于Text元素的高度。如果您只是想以字体绘制符号.largeTitle和以字体绘制文本.body，结果将如下所示，可能会导致与相邻视图重叠：

我仍将进一步调查以找到确保正确视图大小的解决方案，因为这真的让我很恼火。