GeometryReader alignment incorrect

App Development
1

I am using the following code to place an image on the screen. When I subtract anything from “geo.size.width” the image shifts left (.leading). See attached image. This happens in both the canvas and the Simulator. Thoughts?

Thanks for all of your help!
Monty

GeometryReader() {geo in
                Image(getImage())
                    .resizable()
                    .clipped()
                    .aspectRatio( contentMode: .fill)
                   // .padding()
                    .frame(width: geo.size.width-40,  alignment: .center)
                        }

Screen Shot 2022-01-02 at 11.56.42 AM
Screen Shot 2022-01-02 at 11.56.42 AM838×1176 84.7 KB

2

When you place a View inside a GeometryReader it changes the x and y origin of the image to be the top left corner. If you want a bit of space on both the leading and trailing edges then add some horizontal padding to the overall view.

Also the order in which you add modifiers to the Image is very important.

Consider doing this:

GeometryReader { geo in
    Image(getImage())
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: geo.size.width)
        .clipped()
}
3

Thank you Chris for your help!
Monty