为什么forEach循环只能删除最后一张照片？

Question

以下代码用于通过 forEach 循环显示照片。每张照片的右上角都有一个删除按钮。如果用户不喜欢该照片，他/她可以单击按钮删除该照片。但事实上，只有最后一张照片上的删除按钮才能起作用。其他删除按钮不起作用。 为什么？

@State private var cards: [Card] = []
   
@State private var card: Card = Card(id:UUID(),photoData:Data())
        
ScrollView(.vertical) {
  VStack(spacing: 15) {
    /// Parallax Carousel
    GeometryReader(content: { geometry in
      let size = geometry.size

      ScrollView(.horizontal) {
        HStack(spacing: 5) {
          ForEach(cards) { card1 in
            GeometryReader(content: { proxy in
              let cardSize = proxy.size
              let minX = min((proxy.frame(in: .scrollView).minX - 30.0) * 1.4, size.width * 1.4)

              ZStack(alignment: .topTrailing) {
                Image(uiImage: UIImage(data: card1.photoData) ?? UIImage(named: "photoForNil")!)
                  .resizable()
                  .aspectRatio(contentMode: .fill)
                  .offset(x: -minX)
                  .frame(width: proxy.size.width * 2.5)
                  .frame(width: cardSize.width, height: cardSize.height)
                  .clipShape(.rect(cornerRadius: 15))
                  .shadow(color: .black.opacity(0.25), radius: 8, x: 5, y: 10)

                Button {
                  cards.removeAll(where: {
                    $0.id == card1.id
                  })
                } label: {
                  Image(systemName: "multiply")
                    .frame(width: 20, height: 20)
                    .foregroundColor(.white)
                }
              }
            })
            .frame(width: size.width - 60, height: size.height - 50)
            .scrollTransition(.interactive, axis: .horizontal) { view, phase in
              view
                .scaleEffect(phase.isIdentity ? 1 : 0.95)
            }
          }
        }
        .padding(.horizontal, 30)
        .scrollTargetLayout()
        .frame(height: size.height, alignment: .top)
      }
      .scrollTargetBehavior(.viewAligned)
      .scrollIndicators(.hidden)
    })
    .frame(height: 500)
    .padding(.horizontal, -15)
    .padding(.top, 10)
  }
}

卡的类别如下：

import SwiftUI

    ///Card Model
    struct Card: Identifiable, Hashable {
        var id: UUID = .init()
        var photoData: Data = Data()
        
        /// View Based Properties
        var scrollPosition: UUID?
    }

Answer 1

经过两天的调查，我发现我设置了一些参数来保持照片移动过大。当我将它们设置得较小时，删除按钮就可以工作。我在答案中发布了正确的代码。

ScrollView(.vertical) {
                    VStack(spacing: 15) {
                            /// Parallax Carousel
                            GeometryReader(content: { geometry in
                                let size = geometry.size
                                
                                ScrollView(.horizontal) {
                                    HStack(spacing: 5) {
                                        ForEach(cards) { card in
                                            GeometryReader(content: { proxy in
                                                let cardSize = proxy.size
                                                let minX = min((proxy.frame(in: .scrollView).minX - 5.0) * 1.1, size.width * 1.1)
                                                Image(uiImage: UIImage(data: card.photoData) ?? UIImage(named: "photoForNil")!)
                                                    .resizable()
                                                    .aspectRatio(contentMode: .fill)
                                                    .offset(x: -minX)
                                                    .frame(width: proxy.size.width * 1.1)
                                                    .frame(width: cardSize.width, height: cardSize.height)
                                                    .clipShape(.rect(cornerRadius: 15))
                                                    .shadow(color: .black.opacity(0.25), radius: 8, x: 5, y: 10)
                                            })
                                            .frame(width: size.width - 5, height: size.height - 5)
                                            .scrollTransition(.interactive, axis: .horizontal) { view, phase in
                                                view
                                                    .scaleEffect(phase.isIdentity ? 1 : 0.95)
                                            }
                                        }
                                    }
                                    .padding(.horizontal, 5)
                                    .scrollTargetLayout()
                                    .frame(height: size.height, alignment: .top)
                                }
                                .scrollTargetBehavior(.viewAligned)
                                .scrollIndicators(.hidden)
                            })
                            .frame(height: 500)
                            .padding(.horizontal, -5)
                            .padding(.top, 10)
                        }
                        .padding(5)
                    }
                    .scrollIndicators(.hidden)