SwiftUI标签文本和图像垂直未对齐 [英] SwiftUI Label text and image vertically misaligned

问题描述

我正在使用SwiftUI的全新 Label 查看，在Big Sur上运行Xcode 12 beta.

I'm using SwiftUI's brand new Label View, running Xcode 12 beta on Big Sur.

作为图像，我使用 SF符号，并找到了名为"play"的图像.但是我注意到自定义图像没有任何边界像素(即间距不是由图像引起)的相同问题，例如PDF图标，因此它可能与图像无关.

As image I use SF Symbol and found an image named "play". But I've noticed the same problem with custom images without any bordering pixels (i.e. spacing is not caused by the image), e.g. PDF icons, so it is probably not related to the image.

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

In demos by Apple the Text and the image should just automatically align properly, but I do not see that.

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

结果:

有什么想法为什么图像(图标)和文本在垂直方向上未对齐?

Any ideas why the image (icon) and the text is vertically misaligned?

如果我们为Button提供背景色，我们会更精确地看到未对准:

If we give the Button a background color we see more precisely the misalignment:

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

结果:

推荐答案

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

Probably a bug, so worth submitting feedback to Apple. Meanwhile here is working solution based on custom label style.

通过Xcode 12b测试

Tested with 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())
    }
}

这篇关于SwiftUI标签文本和图像垂直未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！