How to align the subviews next to the leading edge of widget, but not to the background image in ZStack?

Question

The image is larger than the widget frame size, and its proportion is 16:10.

The problem is, for subviews in ZStack when under small widget size, both the image(as background) and views above image, are not aligned to the widget itself, but exceed, only half appears.

Is there a way to position all subviews along the widget itself leading edge?

Below is the pic & code:

   var body: some View {
    ZStack(alignment: .leading) {
            Image("bkgImage")
            .resizable()
            .aspectRatio(contentMode: .fill)
        
        if self.widgetFamily == .systemSmall {
            SmallWidgetView()
                .padding(.leading, 12)

        } else if self.widgetFamily == .systemMedium {
            mediumView
                .padding(.leading, 12)
                .padding(.trailing, 12)
        }
    }
}

Thanks very much in advance!

Answer 1

You could either:

• Reformat your image

• Change your ZStack into an H/VStack, get your widgets out of there and into a parent ZStack like this:

  ZStack{ VStack{ Image() } SmallWidgetView() }