Accessory Widget Rectangular with Rounded Corners, Highlighted Background

727 views Asked by At

My iOS accessory widget (a.k.a. iOS 16 "lockscreen" widget) supports both the .accessoryRectangular and .accessoryCircular families.

But since I want a "pill" shape for my rectangular widget (instead of the default sharp corners), I came up with this code for my background view:

private var backgroundView: some View {
  return GeometryReader { geometry in
    AccessoryWidgetBackground()
      .cornerRadius(geometry.size.height / 2.0)
  }  
}

and thus, my widgets' backgrounds for both families look like this:

enter image description here

So far, so good.

However, when I tap on the rectangular widget, the newly revealed clear background around the rounded corners gets "highlighted" in a semi-opaque white color, like this:

enter image description here

Note that this does not happen with the circular widget, even though it is using the same geometry reader + rounded corner code as the rectangular one.

My hunch is that this difference is due to how Apple internally implements the background view for each widget family; because they expect the background to seamlessly fill its bounds in the rectangular case, maybe they do something different with the background view's internals...

Has anyone run into a similar issue, and figured out a workaround?

0

There are 0 answers