SwiftUI实现拖动CellView至边缘时ScrollView自动滚动

• 布局结构：水平ScrollView内垂直排列多个固定宽度的HStack，每个HStack中包含CellView
• 已实现：通过DragGesture()修改CellView的offset实现跨HStack自定义拖放，用onTapGesture()解决了ScrollView与拖拽手势的冲突
• 待解决：拖拽Cell至屏幕左右边缘时，ScrollView无法自动滚动，需手动操作，影响拖放体验
• 已知限制：SwiftUI原生ScrollView不支持直接修改滚动偏移量

核心思路是通过拖拽手势实时检测触摸位置，当进入边缘区域时，通过定时器持续更新滚动偏移，结合ScrollViewReader或内容偏移控制实现自动滚动，具体步骤如下：

1. 定义状态与定时器 #

用于存储滚动偏移量和维持持续滚动的定时器：

@State private var scrollOffset: CGFloat = 0
@State private var autoScrollTimer: Timer?

2. 在拖拽手势中处理边缘检测 #

在DragGesture的回调里判断触摸位置是否触发边缘滚动，计算滚动方向与速度：

DragGesture()
    .onChanged { gestureValue in
        let screenWidth = UIScreen.main.bounds.width
        let edgeThreshold: CGFloat = 30 // 触发自动滚动的边缘距离，可调整
        let scrollSpeed: CGFloat = 8 // 滚动速度，数值越大越快
        
        let touchX = gestureValue.location.x
        var delta: CGFloat = 0
        
        // 判断触发方向
        if touchX < edgeThreshold {
            delta = -scrollSpeed // 左边缘：向左滚动
        } else if touchX > screenWidth - edgeThreshold {
            delta = scrollSpeed // 右边缘：向右滚动
        }
        
        if delta != 0 {
            // 启动定时器持续更新滚动偏移
            autoScrollTimer?.invalidate()
            autoScrollTimer = Timer.scheduledTimer(withTimeInterval: 1/60, repeats: true) { _ in
                scrollOffset += delta
            }
        } else {
            // 离开边缘，停止滚动
            autoScrollTimer?.invalidate()
        }
    }
    .onEnded { _ in
        // 拖拽结束，清理定时器
        autoScrollTimer?.invalidate()
    }

3. 绑定滚动偏移到ScrollView #

根据iOS版本选择适配方案：

方案A：iOS 17+（推荐） #

利用ScrollViewReader的scrollTo方法支持偏移参数，精准控制滚动：

ScrollViewReader { proxy in
    ScrollView(.horizontal) {
        VStack {
            ForEach(0..<5) { rowIndex in
                HStack(spacing: 12) {
                    ForEach(0..<20) { cellIndex in
                        CellView()
                            .frame(width: 75, height: 75)
                    }
                }
                .frame(width: 1500) // 固定HStack宽度
                .id(rowIndex) // 给每个HStack添加ID作为滚动锚点
            }
        }
    }
    .onChange(of: scrollOffset) { newOffset in
        // 以第一个HStack为锚点，通过offset控制滚动位置
        proxy.scrollTo(0, anchor: .leading, offset: CGPoint(x: -newOffset, y: 0))
    }
}

方案B：iOS 16及以下 #

直接给ScrollView的内容添加offset修饰符，通过scrollOffset控制滚动：

ScrollView(.horizontal) {
    VStack {
        ForEach(0..<5) { rowIndex in
            HStack(spacing: 12) {
                ForEach(0..<20) { cellIndex in
                    CellView()
                        .frame(width: 75, height: 75)
                }
            }
            .frame(width: 1500)
        }
    }
    .offset(x: -scrollOffset)
    .animation(.easeInOut, value: scrollOffset) // 添加平滑动画
}

注意事项 #

• 可根据需求调整edgeThreshold和scrollSpeed参数，优化滚动灵敏度与速度
• 拖拽结束时必须停止定时器，避免内存泄漏
• 如果需要更自然的滚动效果，可给滚动偏移添加动画修饰符

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