SwiftUI 标签文本和图像垂直未对齐

Posted 2023-02-24

【中文标题】SwiftUI 标签文本和图像垂直未对齐

【英文标题】：SwiftUI Label text and image vertically misaligned

【发布时间】：2020-06-24 13:34:03

【问题描述】：

我正在使用 SwiftUI 的全新 Label View，在 Big Sur 上运行 Xcode 12 测试版。

作为图像，我使用SF Symbol 并找到了一个名为"play" 的图像。但是我注意到没有任何边界像素的自定义图像存在同样的问题（即间距不是由图像引起的），例如PDF图标，所以可能与图片无关。

在 Apple 的演示中，文本和图像应该会自动正确对齐，但我看不到。

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

结果如下：

任何想法为什么图像（图标）和文本垂直未对齐？

如果我们给按钮一个背景颜色，我们可以更准确地看到错位：

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

结果如下：

【问题讨论】：

我也注意到了这一点。这可能是 SF Symbols 的问题，我们可能需要等待 SF Symbols 2。或者它可能是 beta 的问题。

与非 SF Symbols 图标相同的问题，刚刚尝试了我在其他项目中使用的 PDF 图标，将在问题中添加该详细信息...

【参考方案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())
    

【参考方案2】：

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