SwiftUI拖拽表格列宽时DragGesture translation值过大问题

• 实现场景：ScrollView 内嵌支持列宽拖拽调整的表格，列宽调整通过自定义组件 RView 实现：绑定的宽度值对应单列列宽，作用于列内的 sampleView，表格总宽度为所有列宽的累加值
• 异常表现：拖拽表格前端位置的列宽调整控件时拖拽行为正常；但拖拽表格末尾位置的调整控件时，拖拽速度异常偏快，手势返回的 translation 值过大
• 初步推测：表格总帧宽变化时 RView 会同步位移，导致手势位移计算出现累加偏差

HStack { 
    ForEach(columns) { column in 
        ZStack(alignment: .trailing) {
            sampleView()
                .frame(width: width)
            /// Other views above
            RView(coordinateSpace: coordinateSpace, width: $width)
        }
    }
}.frame(width: totalWidthOfColumns from columns)


struct RView: View {
    let coordinateSpace: String
    @Binding var width: CGFloat

    var body: some View {
        Image(systemName: "star.fill")
            .gesture(
                DragGesture(minimumDistance: 0, coordinateSpace: .named(coordinateSpace))
                    .onChanged { gesture in
                        let distance = gesture.translation.width
                        print(distance)
                        width += distance
                    }
            )
    }
}

DragGesture 的 translation 属性是从手势触发起点开始计算的累计位移值。原有实现每次在 onChanged 回调中直接将全量 translation 累加到当前列宽上，当列宽变化导致 HStack 总宽度改变时，拖拽控件自身会跟随父布局发生位移，这部分位移会被计入下一次回调的 translation 值中，形成重复累加。越靠近表格末尾的调整控件，列宽变化带来的控件自身位移量越大，累加偏差就越明显，最终表现为拖拽速度异常偏快。

• 核心逻辑：放弃每次累加 translation 的写法，拖拽开始时先记录当前列的初始宽度，后续每次手势回调直接用「初始宽度 + 当前手势总位移」计算新的列宽，从根源上规避控件自身位移带来的计算偏差。
• 修改后的 RView 实现：

struct RView: View {
    let coordinateSpace: String
    @Binding var width: CGFloat
    // 记录拖拽起始时的列初始宽度
    @State private var dragStartWidth: CGFloat = 0

    var body: some View {
        Image(systemName: "star.fill")
            .gesture(
                DragGesture(minimumDistance: 0, coordinateSpace: .named(coordinateSpace))
                    .onChanged { gesture in
                        // 手势首次触发时记录初始列宽
                        if dragStartWidth == 0 {
                            dragStartWidth = width
                        }
                        // 直接基于初始宽度计算新列宽，可按需加最小/最大宽度限制
                        width = max(50, dragStartWidth + gesture.translation.width)
                    }
                    .onEnded { _ in
                        // 拖拽结束后重置初始值，避免影响下一次拖拽
                        dragStartWidth = 0
                    }
            )
    }
}

说明：代码中max(50, ...)是限制列宽最小为50，可根据业务需求调整为对应的最小/最大宽度阈值。修改后所有列的拖拽调整手感会保持一致，不会再出现末尾列拖拽速度异常的问题。

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