如何捕获锚定可拖动项动画的启停触发事件？解决LazyColumn拖动异常

核心思路 #

问题根源在于依赖settledValue这类间接状态监听，容易因重组导致状态更新时机错位。要解决这个问题，需要直接捕获拖动手势的开始/结束事件，以及锚定动画的完成回调，以此作为状态更新的可信触发点，避免重组干扰。

具体实现方案 #

1. 全局统一管理激活状态

用全局状态记录当前正在拖动的元素索引，作为所有元素联动逻辑的唯一可信源：

// 全局状态：存储当前激活的拖动元素索引（行索引 + 项索引）
val activeDragIndex = remember { mutableStateOf<Pair<Int, Int>?>(null) }

2. 捕获拖动手势的开始与结束

在Modifier.draggable中通过onDragStarted和onDragStopped直接捕获拖动生命周期，同步更新全局状态：

// 每个列表项的拖动状态
val dragState = remember { Animatable(DragAnchors.Center) }

Modifier.draggable(
    state = rememberDraggableState { delta ->
        // 处理拖动偏移逻辑（根据delta更新锚点状态）
    },
    onDragStarted = {
        // 拖动开始：标记当前元素为激活状态
        activeDragIndex.value = rowIndex to index
    },
    onDragStopped = { velocity ->
        // 拖动结束：启动归位动画，动画完成后重置激活状态
        coroutineScope.launch {
            dragState.animateTo(
                targetValue = DragAnchors.Center,
                // 动画结束后才重置激活索引，避免中途重组导致状态混乱
                onEnd = {
                    if (activeDragIndex.value == rowIndex to index) {
                        activeDragIndex.value = null
                    }
                }
            )
        }
    },
    confirmValueChange = { _ ->
        // 仅允许激活元素或未激活状态下启动拖动
        activeDragIndex.value == null || activeDragIndex.value == rowIndex to index
    }
)

3. 联动重置非激活元素状态

通过LaunchedEffect监听全局激活状态，一旦激活元素切换，立即重置非激活元素的锚点状态：

LaunchedEffect(activeDragIndex.value) {
    // 非激活元素强制回到中心锚点
    if (activeDragIndex.value != null && activeDragIndex.value != rowIndex to index) {
        dragState.snapTo(DragAnchors.Center)
    }
}

方案优势 #

• 手势回调和动画回调直接绑定拖动生命周期，不受重组影响，状态更新时机精准。
• 全局激活状态作为唯一可信源，避免多个局部状态不一致的问题。
• 动画onEnd回调确保只有当前元素的归位动画完全结束后才释放激活状态，彻底解决中途重置失效的问题。

内容的提问来源于stack exchange，提问作者Данил Бессонов