I'm using SwiftUI's brand new Label
View, running Xcode 12 beta on Big Sur.
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.
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")
}
}
Results in this:
Any ideas why the image (icon) and the text is vertically misaligned?
If we give the Button a background color we see more precisely the misalignment:
Label("Play", systemImage: "play")
.background(Color.red)
Results in this:
Probably a bug, so worth submitting feedback to Apple. Meanwhile here is working solution based on custom label style.
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())
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With