SwiftUI标签的文本和图像垂直不对齐。

Question

我正在使用SwiftUI全新的Label视图，在Big Sur上运行Xcode 12 beta。

作为图片，我使用SF Symbol并找到了一个名为"play"的图像。但是我发现即使是没有任何边框像素（例如：间隔不是由于图片引起）的自定义图片也存在相同的问题，例如PDF图标，因此这可能与图像无关。

在Apple的演示中，文本和图像应该会自动对齐，但我并没有看到这种对齐效果。

struct ContentView: View {
    var body: some View {
        Label("Play", systemImage: "play")
    }
}

这会导致如下结果：

有任何想法是什么原因导致图像（图标）和文本在垂直方向上错位吗？

如果我们给按钮一个背景色，我们可以更精确地观察到错位：

Label("Play", systemImage: "play")
    .background(Color.red)

这导致了以下结果：

- Sajjon

---

我也注意到了这点。这可能是与SF Symbols有关的问题，我们可能需要等待SF Symbols 2。或者这可能是与测试版有关的问题。 - Andrew

非SF符号图标遇到了相同的问题，我刚试了一下在其他项目中使用过的PDF图标，我会将此详情添加到问题中... - Sajjon

Answer 1

可能是一个bug，因此值得向苹果提交反馈。同时，这里提供了基于自定义标签样式的可行解决方案。

已在Xcode 12b中测试过

struct CenteredLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.icon
            configuration.title
        }
    }
}

struct TestLabelMisalignment: View {
    var body: some View {
        Label("Play", systemImage: "play")
           .labelStyle(CenteredLabelStyle())
    }
}

- Asperi

Answer 2

@Sajjon 你可以添加一个自定义视图作为解决方法，并在 HStack 中使用带有文本的图像。

- user2731717