SwiftUI 标签文本和图像垂直错位

Question

我正在使用 SwiftUI 的全新 Label View，运行 Xcode Big Sur 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)

结果：

Answer 1

可能是一个错误，因此值得向 Apple 提交反馈。同时这是基于自定义标签样式的工作解决方案。

使用 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())
    }
}

Answer 2

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

SwiftUI 标签文本和图像垂直错位

SwiftUI Label text and image vertically misaligned

swift

swiftui

xcode12