WidgetKit background like the system battery widget

Would love to know this as well..

Can you try wrapping the UIVisualEffectView in a ViewRepresentable protocol and see if you can use it?

Yeah,I have this question,too.
Do you have any progress?
If it possible,could you tell me when you have a solution?
Thanks,
Littleor

Jjm

Me too

Would love to know the same!

watching this too

watching this too...

I tried wrapping UIVisualEffectView in a ViewRepresentable protocol, but that didn't work. The widget rendered with a large yellow/red forbidden image as background.

watching this too...

+1 👀

There is a related question https://developer.apple.com/forums/thread/653471 "Add UIKit view into iOS 14 Widget"

The reply: "UIKit views wrapped in UIViewRepresentable will not work in WidgetKit. When the views are encoded from your extension to be displayed they will appear blank. "

following but guessing this is an apple only thing that they might open up in official docs

前排插眼（谁说只能英文回复？）+1

Code Block swift
var body: some View {
        VStack{
            if self.family == .systemLarge {
                LargeEntryView()
            } else if self.family == .systemMedium {
                MediumView()
            } else {
                SmallView()
            }
        }.background(ContainerRelativeShape().fill(Color.init(.sRGB, red: 0.89, green: 0.89, blue: 0.89, opacity: 0.75)))
    }

works like charms.

@hite
I am wrong。

Code Block 
background(ContainerRelativeShape().fill(Color.init(.sRGB, red: 0.89, green: 0.89, blue: 0.89, opacity: 0.75)))

doesn`t work

Same issue here

Watching this too

I ran into this problem too. If you set your padding at the top or bottom too small you see the white canvas of the widget show through. I use a view background of black for instance (using below .background attached to the greatest View).

I also noticed that the Preview in Xcode and the actualy rendered widget in the Simulator are not exactly the same.
One can see the corners show up in the Preview but in the simulator they are gone.

I think probably the only way around this is to use a padding sufficient enough to overlap those 'gaps'. which is messy. and probably a reason why Apple has some 'design' recommendations including a padding of 15px.

EDIT:

I just found the way to do it.

You need to include

Code Block 
Spacer()

in the VStack to stretch to max size of canvas and similarly for the HStack if you are having gaps.

This solved it for me...