SwiftUI wrong cell tap

When working with collections, you might encounter a bug where tapping on one cell triggers the onTapGesture of another cell.

This issue can arise due to an incorrect definition of the cell’s tappable area. Let’s take a closer look at what a cell consists of.

One of the most interesting aspects is the background image and clipShape. If you remove clipShape, it becomes clear why taps might be registered on a different cell. The clipShape does not alter the tappable area. To properly handle the tappable area, you should use contentShape.

struct Cell: View {
    let item: Int
    @State var opacity = 1.0
    var body: some View {
        ZStack(alignment: .leading) {
            Color.clear
            Text("\(item)")
                .font(.system(size: 60))
                .monospacedDigit()
                .foregroundStyle(.white)
                .padding(.horizontal)
                .background(
                    RoundedRectangle(cornerRadius: 10)
                        .fill(.black.opacity(0.6))
                )
                .padding()
        }
            .background(
                Image("image")
                    .resizable()
                    .scaledToFill()
            )
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .frame(height: 110)
            .padding(.horizontal, 10)
            .opacity(opacity)
            .onTapGesture {
                opacity = 0
                withAnimation {
                    opacity = 1
                }
            }
    }
}

struct ContentView: View {
    
    @State var items: [Int] = [0, 1, 2]
    @State var tapped: String?
    
    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                Cell(item: item)
            }
        }
    }
}