Apple Watch Complication with SF Symbols slightly off-center

Question

schech1 OP

Created 15h

Replies 2

Boosts 0

Participants 2

I have some simple circular complications, that use a ZStack with SFSymbols.

On high contrast Watch Faces, I noted that the circle is slightly off to the top leading side.

I tried to set the ZStack alignment to center, fiddled around with Spacers, but I could not get it centered.

Is that a bug or am I missing something?

struct CircularWidgetDashed: View {
    var entry: Provider.Entry
    
    var body: some View {
        ZStack {
            Image(systemName: "circle.dashed")
                .resizable()
                .scaledToFit()
                .foregroundColor(.green)
                
                Text("\(entry.online)/\(entry.total)")
                    .foregroundStyle(.primary)
                    .font(.caption)
                    .fontWeight(.semibold)
        }
        .widgetAccentable()
    }
}

Boost

Answer 1

darkpaw OP

12h

Yeah, definitely wrong. I've just recreated this myself.

You should raise this as a bug at https://feedbackassistant.apple.com/ then post the FB number here.

I managed to get a normal dashed line to work, but the trade-off is that you have to get the right values for the circle size, or the dash where the line ends will be the wrong length when it hits the part where it started (if that makes sene?).

// Looks correct for Accessory Circular:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 10, dash: [12.5, 7.25]))

// Looks correct for Accessory Corner:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 7, dash: [11, 6.5]))

// Neither of those two looks right for Accessory Rectangular

You'll have to play around with the values for the different Accessory types if you decide to go with this option.

1

Answer 2

darkpaw OP

1h

I had another think about this. How about using .position(x:, y:) to move the image?

Just tried this code, and it looks good for AccessoryCircular, AccessoryInline, AccessoryRectangular, Smart Stack Circular and Smart Stack Rectangular, but is slightly off for AccessoryCorner, so again, you'll have to fiddle with the numbers for at least one of the types:

GeometryReader { g in
	ZStack {
// I added this circle to show where it is in the view
		Circle()
			.foregroundColor(Color.blue)

		Image(systemName: "circle.dashed")
			.resizable()
			.scaledToFit()
			.foregroundColor(.green)
			.position(x: g.size.width / 2 + 0.5, y: g.size.height / 2 + 0.5)  // The 0.5 is the part that moves it to the right and down a little

		Text("9/9")
			.foregroundStyle(.primary)
			.font(.caption)
			.fontWeight(.semibold)
	}
	.widgetAccentable()
}

0