Jetpack Compose可拖拽元素如何实现拖拽停止后带动画重置偏移量？

原代码的核心问题 #

• 交互状态未正确托管：代码中的var shouldReset = false是Composable函数内的普通局部变量，既不会因为值的修改触发UI重组，也不会在组件重组时保留之前的赋值，整个判断分支完全无效。
• 动画触发逻辑被破坏：在onDragStopped回调中直接将currentOffset设为0，等于瞬间将元素位置拉回原点；同时resetAnimation的target值是从currentOffset计算的，currentOffset为0时和当前元素位置完全一致，没有平滑过渡的空间，动画根本不会启动。
• 分支设计冗余：手动切换“直接偏移/动画偏移”的逻辑完全没有必要，利用官方动画API的响应特性，就可以同时满足拖拽实时跟手、松手平滑回位的需求。

修正后的可运行代码 #

@Composable
fun DraggableSquare() {
    // 托管垂直方向的偏移目标值
    var offsetY by remember { mutableFloatStateOf(0f) }
    // 绑定偏移的动画状态：拖拽时实时跟手，松手时平滑回位
    val animatedOffset by animateFloatAsState(
        targetValue = offsetY,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessMedium
        ),
        label = "SquareVerticalOffset"
    )

    Box(contentAlignment = Alignment.TopCenter, modifier = Modifier.fillMaxSize()) {
        Surface(
            color = Color(0xFF34AB52),
            modifier = Modifier
                .size(100.dp)
                // 用布局阶段的offset计算，避免额外重组，性能更优
                .offset { IntOffset(0, animatedOffset.roundToInt()) }
                .draggable(
                    state = rememberDraggableState { delta ->
                        // 拖拽过程中实时更新目标偏移，保证跟手
                        offsetY += delta
                    },
                    orientation = Orientation.Vertical,
                    onDragStopped = {
                        // 松手时把目标偏移设为原点，触发动画回位
                        offsetY = 0f
                    }
                )
        ) {}
    }
}

实现逻辑说明 #

• 所有交互状态都通过remember+可观察状态托管，修改时自动触发UI更新，状态不会因为组件重建丢失。
• 拖拽过程中，手指移动产生的delta会逐帧小幅更新offsetY，动画因为两次更新的数值差极小，会立刻跟上位置变化，完全实现实时跟手的效果，不会出现动画滞后的问题。
• 拖拽停止时，offsetY直接设为0，动画的目标值从松手时的停留位置突变到原点，自动播放平滑的过渡效果，完全符合回位需求。
• 可通过修改animationSpec的参数，自定义回位的动画效果（比如弹簧回弹强度、过渡速度等）。

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