Nicolas Miari
Nicolas Miari

Reputation: 16256

Accessory Widget Rectangular with Rounded Corners, Highlighted Background

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?

Upvotes: 2

Views: 1144

Answers (0)

Related Questions