0

I'm currently using GeometryReader and Image to have images in a 3-column grid. In this grid, I want when user taps the image, they will see the bigger version of it.

However, when I implemented this, GeometryReader is not functioning properly. The image within the GeometryReader is overflowing the frame size passed to the GeometryReader.

I have checked that the size of GeometryReader is 1:1 ratio, but when you see the screenshot of view hierarchy, the size of image is different.

Below is the code for my custom Image view.

GeometryReader { geo in
        if isZoomable {
            Image("Image_gallery_default")
                .centerCropped(width: geo.size.width, height: geo.size.height)
                .aspectRatio(1.0, contentMode: .fill)
                .onTapGesture {
                    showImage = true
                }
        } else {
            Image("Image_gallery_default")
                .centerCropped(width: geo.size.width, height: geo.size.height)
        }
    }

And centerCropped modifier is just a set of resizable/scaletofill/frame/clipped to make image center cropped.

self
        .resizable()
        .scaledToFill()
        .frame(width: width, height: height)
        .clipped()

The image on screen is just fine picture.

But if you tap on the right side of first picture (turlip one), it will instead show the picture on right side.

Why is the Image view overflowing instead of following the width of GeometryReader? I searched to find out the solution, but nothing similar came up.

Screenshot of Screen in Phone

Debug View Hierarchy of the Image

S. Hwang
  • 71
  • 1
  • 12
  • Include your code in a [mre]. Otherwise, the chances of debugging this are very slim. – jnpdx Apr 26 '21 at 04:58
  • Okay, I have added the code. Maybe this is enough? – S. Hwang Apr 26 '21 at 07:49
  • Not really sure what is unexpected... every modifier creates (or can create) a new view around modified view to present it on screen, but original view itself is not necessary be changed. So what's wrong? As I can see by screenshot all is presented as should. – Asperi Apr 26 '21 at 10:03
  • @Asperi The size of Image inside Geometry Reader is overflowing to right and left... So when I click the right side of left image, the right image is clicked instead. – S. Hwang Apr 27 '21 at 16:30

0 Answers0