如何让Android Jetpack Compose拖拽元素无延迟跟随指针位置？

你的问题出在使用mutableStateOf维护偏移量的方式上——每次更新状态都会触发Compose重组，重组调度的延迟在快速拖拽时会被放大，导致元素跟不上指针移动。下面是两种优化方案：

方案一：使用Animatable替代mutableStateOf #

Animatable的更新可以在指针事件的协程内直接生效，无需等待重组调度，能实现即时响应：

@Composable
fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        val offset = remember { Animatable(Offset.Zero) }

        Box(
            Modifier
                .offset { IntOffset(offset.value.x.roundToInt(), offset.value.y.roundToInt()) }
                .background(Color.Blue)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        coroutineScope.launch {
                            offset.snapTo(offset.value + dragAmount)
                        }
                    }
                }
        )
    }
}

方案二：基于触摸位置直接计算偏移（更精准） #

这种方式通过记录触摸点与元素的相对偏移，直接用当前触摸位置计算元素应处的位置，避免累加误差的同时进一步提升响应速度：

@Composable
fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        var initialTouchOffset by remember { mutableStateOf(Offset.Zero) }
        val offset = remember { Animatable(Offset.Zero) }

        Box(
            Modifier
                .offset { IntOffset(offset.value.x.roundToInt(), offset.value.y.roundToInt()) }
                .background(Color.Blue)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures(
                        onDragStart = { touchPosition ->
                            // 记录触摸点相对于元素左上角的偏移量
                            initialTouchOffset = touchPosition - offset.value
                        }
                    ) { change, _ ->
                        change.consume()
                        coroutineScope.launch {
                            // 根据当前触摸位置直接计算元素位置
                            offset.snapTo(change.position - initialTouchOffset)
                        }
                    }
                }
        )
    }
}

原理说明 #

Animatable的snapTo方法会立即更新内部值，offset修饰符读取Animatable.value时，会在值变化的第一时间更新布局位置，绕过了mutableStateOf触发重组带来的调度延迟，从而实现元素无延迟跟随指针。

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