LazyVGrid miss handles the tap

Question

I am using the LazyVGrid in my app and a faced such problem

There are two columns in the grid and that is handling the tap in the wrong place

On the screenshot, red arrows - places of the click I used to think that would open the MacBookAir's card, but that opens the iPadAir's one

struct GalleryView: View {
    var ns: Namespace.ID

    @EnvironmentObject private var model: Model

    let columns = [
        GridItem(.adaptive(minimum: 400))
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(Card.list) { card in
                if card != model.selectedCard {
                    GalleryCardView(card: card, ns: ns)
                        .onTapGesture {
                            withAnimation(.openCard) {
                                model.selectedCard = card
                                model.isDetailShown = true
                            }
                        }
                } else {
                    Color(.clear)
                        .frame(width: 400, height: 400)
                }
            }
        }
    }
}

Here is the GalleryCardView:

struct GalleryCardView: View {
    let card: Card

    var ns: Namespace.ID

    var body: some View {
        ZStack {
            Image(card.image)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 400, height: 400)
                .clipped()
                .matchedGeometryEffect(id: "\(card.id)-image", in: ns)
                .overlay(alignment: .bottom) {
                    Text(card.title)
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .frame(maxWidth: .infinity)
                        .frame(height: 50)
                        .padding()
                        .background {
                            Rectangle()
                                .fill(.ultraThinMaterial)
                        }
                        .matchedGeometryEffect(id: "\(card.id)-title", in: ns)
                }
        }
        .clipShape(RoundedRectangle(cornerRadius: 30))
        .matchedGeometryEffect(id: "\(card.id)-card", in: ns)
    }
}

UPD: I had some work around and find out that the problem is with the GalleryCardView - even though the image is clipped, it took extra space outside the frame. If I change the aspect ratio to .fit, everything works fine

I don't understand your code and description here? There is no context at all? Where is `Card.List`? Where is your result? Where is the view that open up the card? How the card open? After `onTapGesture{}` is tapped, nothing happens at all in the code here. — Steven-Carrot, Aug 08 '22 at 00:39
I had some work around and find out that the problem is with the GalleryCardView - even though the image is clipped, it took extra space outside the frame. If I change the aspect ratio to .fit, everything works fine — Daniel Pustotin, Aug 08 '22 at 06:56

LazyVGrid miss handles the tap

0 Answers0