I have run into a problem with corner complications implemented with SwiftUI on watchOS 9, and so far the problem seems like a bug to me. I'm looking for ideas to solve this problem or any info about it, if someone else has run into the same issue.
If I create a complication with SwiftUI with the .accessoryCircular
family and add a widgetLabel
with Gauge
element, the gauge has an option to add minimum and maximum value labels to both ends of the gauge. These labels are added with minimumValueLabel
and maximumValueLabel
, respectively.
However, on some Apple Watch models, such as Apple Watch Ultra and Apple Watch Series 7 45 mm, the text labels are cut off and clipped outside of the view, even if the label is only two characters long. The space reserved for the label text is minimal, and the gauge pushes the text labels outside of this space.
Mock implementation of the corner complication content to replicate the issue:
...
Image("moon").resizable().frame(width: 30, height: 30).widgetLabel {
Gauge(value: 25, in: 25...30) {
Text("Example")
} currentValueLabel: {
Text("Example")
} minimumValueLabel: {
Text("20").foregroundColor(.red)
} maximumValueLabel: {
Text("30").foregroundColor(.green)
}.tint(.blue)
}
...
Trying to set a font size or weight to the gauge labels has no effect.
This issue persist in the latest Xcode & watchOS version at the time of writing, 14.1 and 9.1.
In this example image the label "86" is clipped. Sometimes both of the labels get cut off, sometimes only one.