SwiftUI中能否实现ScrollView与带延迟的拖拽重排手势兼容？

当然可行，SwiftUI的手势系统结合状态管理完全能实现这个需求。下面是具体的实现思路和代码示例：

核心实现要点 #

• 延迟触发拖拽：通过异步延迟逻辑，确保用户长按1秒后才激活拖拽，避免和滚动操作冲突。
• 拖拽Item样式控制：用状态变量标记当前拖拽的Item，动态添加阴影、缩放等视觉效果，保持和普通Item一致的基础外观。
• 滚动容器内的排序逻辑：维护数据源数组，拖拽过程中实时计算位置，更新数组元素顺序，配合动画优化交互体验。

完整代码示例 #

import SwiftUI

// 列表项数据模型，遵循Identifiable便于ForEach遍历
struct ListItem: Identifiable {
    let id = UUID()
    var text: String
}

struct ReorderableScrollList: View {
    @State private var items: [ListItem] = (1...20).map { ListItem(text: "Item \($0)") }
    @State private var draggingItem: ListItem?
    @State private var dragOffset: CGSize = .zero
    @State private var isDragging = false
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 8) {
                ForEach(items) { item in
                    Text(item.text)
                        .padding()
                        .background(Color.white)
                        .cornerRadius(8)
                        // 拖拽时添加阴影和缩放效果
                        .shadow(color: isDragging && draggingItem?.id == item.id ? .black.opacity(0.2) : .clear, radius: 8, x: 0, y: 4)
                        .scaleEffect(isDragging && draggingItem?.id == item.id ? 1.02 : 1.0)
                        .offset(isDragging && draggingItem?.id == item.id ? dragOffset : .zero)
                        .gesture(
                            DragGesture(minimumDistance: 0, coordinateSpace: .global)
                                .onChanged { value in
                                    if !isDragging {
                                        // 1秒延迟后触发拖拽逻辑
                                        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                                            if value.translation != .zero {
                                                isDragging = true
                                                draggingItem = item
                                                dragOffset = value.translation
                                            }
                                        }
                                    } else {
                                        dragOffset = value.translation
                                        // 根据拖拽位置更新列表顺序
                                        updateItemOrder(with: value.location)
                                    }
                                }
                                .onEnded { _ in
                                    // 拖拽结束重置状态
                                    isDragging = false
                                    draggingItem = nil
                                    dragOffset = .zero
                                }
                        )
                }
            }
            .padding()
        }
        .background(Color(.systemGray6))
    }
    
    private func updateItemOrder(with location: CGPoint) {
        guard let draggingItem = draggingItem, let dragIndex = items.firstIndex(where: { $0.id == draggingItem.id }) else { return }
        
        // 遍历计算目标位置，这里假设每个Item的固定尺寸，也可以用GeometryReader获取实际frame
        let itemHeight: CGFloat = 50
        let spacing: CGFloat = 8
        
        for (index, _) in items.enumerated() {
            let itemCenterY = (itemHeight / 2) + CGFloat(index) * (itemHeight + spacing) + 16 // 加上顶部padding
            
            if abs(location.y - itemCenterY) < itemHeight / 2 {
                if index != dragIndex {
                    withAnimation(.easeInOut(duration: 0.2)) {
                        items.move(fromOffsets: IndexSet(integer: dragIndex), toOffset: index > dragIndex ? index + 1 : index)
                    }
                    break
                }
            }
        }
    }
}

#Preview {
    ReorderableScrollList()
}

关键细节说明 #

• 延迟逻辑通过DispatchQueue.main.asyncAfter实现，只有用户按住并产生位移时才会激活拖拽，避免误触。
• 拖拽时的视觉效果仅针对当前被拖拽的Item，保持其他Item样式不变。
• 排序逻辑通过move方法修改数组，配合动画让位置切换更流畅，如果需要更精准的位置判断，可以用GeometryReader获取每个Item的实际布局frame。

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