SwiftUI开发Tinder式滑动功能：卡片堆叠问题求助

在SwiftUI开发类似Tinder的滑动卡片功能时，遇到所有卡片堆叠在初始界面的问题（实际效果为所有卡片完全重叠），预期是分层展示的卡片效果。

实际效果：

预期效果：

现有代码 #

MainView

NavigationView  {
    VStack () {
        ZStack {
            ForEach(outingsVM.outings, id: \.dateId) { outing in
                 CardView(outing: outing)
             }
         }
    }
}

CardView

ZStack {
    VStack {
        HStack {
                Text("\(outing.name), \(outing.age)")
        }
        .frame(width: 320, alignment: .leading)
           
        HStack (alignment: .center) {
            Image(systemName: "figure.walk.circle")
            Text("\(outing.place)")
        }
        .frame(width: 320, alignment: .leading)
        
        HStack {
            Image(systemName: "calendar.circle")
            Text("\(outing.date)  \(outing.time)")
        }
        .frame(width: 320, alignment: .leading)
        
        HStack {
            Image(systemName: "creditcard.circle")
            Text("\(outing.payment)")
        }
        .frame(width: 320, alignment: .leading)
  
        HStack (){
            Spacer()
            //accept date
            Button {
                showingModal = true
            } label: {
                Image(systemName: "checkmark.circle.fill")
                    .font(.system(size: 50))
                    .foregroundColor(.green)
            }
            
            Spacer()
            
            //reject date
            Button {
                swipeCard(width: -200)
            } label: {
                Image(systemName: "xmark.circle.fill")
                    .font(.system(size: 50))
                    .foregroundColor(.red)
            }
            
            Spacer()
        }
        .frame(width: 320)
        .padding()
   }
}

问题核心是ZStack中所有卡片默认完全重叠，未设置层级偏移和显示优先级。要实现分层效果，需给每个卡片添加偏移量、层级优先级，可选配合缩放效果，让底层卡片露出边缘，同时保证顶层卡片在最上方。

步骤1：修改MainView的ForEach逻辑 #

给每个卡片根据索引设置偏移、层级和缩放：

NavigationView  {
    VStack () {
        ZStack {
            // 使用带索引的ForEach遍历数组
            ForEach(Array(outingsVM.outings.enumerated()), id: \.element.dateId) { index, outing in
                CardView(outing: outing)
                    // 底层卡片依次向下偏移，索引越大偏移量越大
                    .offset(y: CGFloat(index) * 15)
                    // 顶层卡片zIndex更高，确保显示在最上方
                    .zIndex(CGFloat(outingsVM.outings.count - index))
                    // 可选：底层卡片轻微缩小，强化分层视觉
                    .scaleEffect(1 - CGFloat(index) * 0.03)
            }
        }
    }
}

步骤2：完善CardView的滑动交互（可选但必要） #

当前CardView缺少滑动移除逻辑，添加拖拽手势实现滑动效果，同时滑动后更新数据源让底层卡片补位：

struct CardView: View {
    let outing: Outing // 替换为你的数据模型类型
    @State private var offset: CGSize = .zero
    @Binding var outings: [Outing] // 绑定数据源，用于移除卡片
    
    var body: some View {
        ZStack {
            // 保留原有的VStack内容...
        }
        .background(Color.white)
        .cornerRadius(12)
        .shadow(radius: 5)
        .offset(offset)
        .gesture(
            DragGesture()
                .onChanged { gesture in
                    offset = gesture.translation
                }
                .onEnded { gesture in
                    // 滑动超过阈值则移除卡片
                    if abs(gesture.translation.width) > 100 {
                        withAnimation {
                            offset = CGSize(width: gesture.translation.width > 0 ? 500 : -500, height: 0)
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                                outings.removeAll { $0.dateId == outing.dateId }
                            }
                        }
                    } else {
                        // 滑动不足则回弹
                        withAnimation {
                            offset = .zero
                        }
                    }
                }
        )
    }
}

同时在MainView中传递绑定的数据源：

CardView(outing: outing, outings: $outingsVM.outings)

原理说明 #

• offset(y:)：让卡片依次向下偏移，露出底层卡片的底部边缘
• zIndex：控制卡片显示层级，确保数组中靠前的卡片（用户最先看到的）在顶层
• scaleEffect：通过轻微缩小底层卡片，增强层次感
• 拖拽手势：实现左右滑动移除卡片，同时更新数据源让剩余卡片自动重新分层

内容的提问来源于stack exchange，提问作者shekwo