SwiftUI中带DragGesture的卡片导致ScrollView无法滚动的解决方法

问题场景 #

在SwiftUI中通过ScrollView结合ForEach展示一系列CardView，为卡片添加DragGesture实现左滑显示删除按钮的功能后，出现手势冲突：ScrollView仅能在卡片间隙区域滚动，直接在卡片上滑动会被DragGesture拦截，无法触发滚动；移除手势后ScrollView恢复正常。需要保留卡片滑动删除功能的同时，让ScrollView正常响应滚动操作。

解决方案 #

核心思路是让DragGesture仅处理水平方向的滑动（触发删除逻辑），垂直方向的滑动则交给ScrollView处理。通过判断滑动的位移方向，决定是否响应手势事件。

修改卡片视图的手势代码 #

在TrackDetailVerticalLapTimeCardView的DragGesture中添加方向判断逻辑：

.gesture(
    DragGesture(minimumDistance: 10) // 设置最小滑动距离，减少误触概率
        .onChanged { gesture in
            let buttonWidth: CGFloat = 120
            // 优先处理垂直滑动：若垂直位移大于水平位移，直接返回，让ScrollView响应滚动
            if abs(gesture.translation.height) > abs(gesture.translation.width) {
                return
            }
            // 原有水平滑动逻辑
            if isButtonRevealed {
                offset = min(max(gesture.translation.width - buttonWidth, -buttonWidth), 0)
            } else {
                offset = min(max(gesture.translation.width, -buttonWidth), 0)
            }
        }
        .onEnded { gesture in
            let buttonWidth: CGFloat = 120
            // 垂直滑动时，保持当前卡片状态（已展开删除按钮则保留，否则重置）
            if abs(gesture.translation.height) > abs(gesture.translation.width) {
                withAnimation {
                    offset = isButtonRevealed ? -buttonWidth : 0
                }
                return
            }
            // 原有滑动结束后的状态判断逻辑
            if offset <= -buttonWidth * 0.5 {
                withAnimation {
                    offset = -buttonWidth
                    isButtonRevealed = true
                }
            } else {
                withAnimation {
                    offset = 0
                    isButtonRevealed = false
                }
            }
        }
)

额外优化：使用原生滑动删除（可选） #

如果可以将ScrollView替换为List，可以直接使用SwiftUI原生的swipeActions实现滑动删除，无需自定义DragGesture，完全避免手势冲突：

// 在allLapTimesSection的ForEach中修改：
ForEach(lapTimes, id: \.id) { lapTime in
    TrackDetailVerticalLapTimeCardView(lapTime: lapTime, position: nil)
        .padding(.horizontal)
        .onTapGesture {
            // 原有点击逻辑
        }
        .swipeActions(edge: .trailing) {
            Button(role: .destructive) {
                withAnimation {
                    deleteLapTime(lapTime)
                }
            } label: {
                Label(NSLocalizedString("l_delete", comment: "Delete"), systemImage: "trash")
            }
        }
}

这种方式代码更简洁，还能获得系统原生的滑动交互体验，且不会与列表滚动产生冲突。

内容的提问来源于stack exchange，提问作者D.Schall