SwiftUI拖拽改变视图位置引发UI卡顿及动画警告问题

问题根源 #

• 拖拽过程中每次onChanged都调用withAnimation更新showPlot，导致动画系统频繁创建动画实例，队列混乱触发时间戳异常警告。
• 覆盖线的文本和矩形分别设置position(x: barTranslation)，拖拽时会触发多个独立视图的重绘，增加UI开销导致卡顿。
• isDrag状态的onChange监听与onEnded逻辑重复，可能引发UI状态冲突。

修复方案 #

1. 仅在手势启动时一次性触发覆盖层显示，拖拽过程中避免重复触发动画；结束时用动画平滑隐藏。
2. 统一控制整个覆盖层的位置，减少重复重绘操作。
3. 移除冗余的中间状态isDrag，直接通过手势生命周期管理showPlot。

修改后的代码 #

GraphView(coin: data).frame(height: 300)
    .gesture(DragGesture(minimumDistance: 0)
        .onChanged { value in
            // 首次拖拽时显示覆盖层，避免重复触发动画
            if !showPlot {
                showPlot = true
            }
            // 即时更新位置，拖拽跟随无需动画
            barTranslation = value.location.x
        }
        .onEnded { _ in
            withAnimation {
                showPlot = false
            }
        })
    .overlay(alignment: .bottomLeading) {
        VStack(spacing: 0){
            Text(currentPlot)
                .font(.caption.bold())
                .foregroundStyle(.gray)
                .padding(.bottom, 35)
            Rectangle()
                .fill(.gray)
                .frame(width: 1, height: 300)
            Spacer()
        }
        // 统一设置整个VStack的位置，减少重绘次数
        .position(x: barTranslation, y: 150) // y值取高度一半，保证垂直居中
        .opacity(showPlot ? 1 : 0)
        // 给显隐动画统一配置，替代手动频繁调用withAnimation
        .animation(.easeInOut, value: showPlot)
    }

关键改动说明 #

• 移除isDrag相关逻辑，直接通过手势的onChanged和onEnded控制showPlot状态，减少状态冗余。
• 拖拽时barTranslation直接更新，无动画干扰，保证跟随流畅；仅显隐过程保留动画，避免动画队列混乱。
• 设置DragGesture(minimumDistance: 0)让覆盖层在手指触碰瞬间就显示，提升交互响应速度。

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