方法：

• 使用ZStack堆叠卡片
• 在卡上添加DragGesture
• 使用手势上的.onChanged和.onEnded移动卡片
• 旋转卡片
• 向卡片添加抵销
• 使用withAnimation { }设置值更改的动画

下面给出的是一个粗略的实现，您可以将其用作指导并对其进行改进：

卡片：

import Foundation
import SwiftUI

struct Card: Identifiable {
    let id: Int
    let title: String
    let color: Color
}

型号：

class Model: ObservableObject {
    @Published var cards = [
        Card(id: 1, title: "1", color: .red),
        Card(id: 2, title: "2", color: .green),
        Card(id: 3, title: "3", color: .blue),
        Card(id: 4, title: "4", color: .yellow),
        Card(id: 5, title: "5", color: .purple),
        Card(id: 6, title: "6", color: .orange),
    ]
    
    func removeFirstCard() {
        guard !cards.isEmpty else {
            return
        }
        cards.remove(at: 0)
    }
}

卡片视图：

struct CardView: View {
    let title: String
    let color: Color
    
    @EnvironmentObject private var model: Model
    
    private let xthreshold = CGFloat(150)
    private let yMovement = CGFloat(10)
    
    @State private var xOffset = CGFloat(0)
    @State private var yOffset = CGFloat(0)
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 18)
                .foregroundColor(color)
            Text(title)
                .foregroundColor(.white)
        }
        .frame(width: 300, height: 400)
        .gesture(dragGesture)
        .offset(x: xOffset, y: yOffset)
        .rotationEffect(rotationAngle, anchor: rotationAnchor)
    }
    
    var rotationAngle: Angle {
        let degrees: Double
        switch xOffset {
        case 0:
            degrees = 0
        case ...0:
            degrees = -5
        case 0...:
            degrees = 5
        default:
            degrees = 0
        }
        return Angle(degrees: degrees)
    }
    
    var rotationAnchor: UnitPoint {
        xOffset >= 0 ? .topLeading : .topTrailing
    }
    
    var dragGesture: some Gesture {
        DragGesture(minimumDistance: 20)
            .onEnded { value in
                let xOffset: CGFloat
                let yOffset: CGFloat
                switch self.xOffset {
                case ...(-xthreshold):
                    print("negative")
                    xOffset = -200
                    yOffset = yMovement
                case -xthreshold...0:
                    print("negative - not enough")
                    xOffset = 0
                    yOffset = 0
                case xthreshold...:
                    print("positive")
                    xOffset = 200
                    yOffset = yMovement
                case 0...:
                    print("positive - not enough")
                    xOffset = 0
                    yOffset = 0
                default:
                    print("default")
                    xOffset = 0
                    yOffset = 0
                }
                
                withAnimation {
                    self.xOffset = xOffset
                    self.yOffset = yOffset
                    if xOffset != 0 {
                        model.removeFirstCard()
                    }
                }
            }
            .onChanged { value in
                switch value.translation.width {
                case ...0:
                    print("negative")
                    withAnimation {
                        yOffset = yMovement
                    }
                case 0...:
                    print("positive")
                    withAnimation {
                        yOffset = yMovement
                    }
                default:
                    print("default")
                    withAnimation {
                        yOffset = 0
                    }
                }

                xOffset += value.translation.width
            }
    }
}

内容视图：

struct ContentView: View {
    @StateObject var model = Model()
    var body: some View {
        ZStack {
            ForEach(model.cards.reversed()) { card in
                CardView(title: card.title, color: card.color)
                    .environmentObject(model)
            }
        }
    }
}