Jetpack Compose LazyColumn点击手势触发时跳转错误项问题

应用中列表项需实现以下交互：

• 点击：打开对应详情页
• 长按：弹出基于点击偏移定位的下拉菜单

当前存在异常：

• 滚动列表后首次点击某一项，打开的详情页并非对应项；再次点击同一项跳转正常
• 使用clickable替代detectTapGestures时导航正常，但无法获取长按偏移量
• 尝试combinedClickable无法获取点击偏移量，无法准确定位下拉菜单

核心问题出在ThingListItem的pointerInput参数配置错误：

.pointerInput(true) { ... }

这里传入的key是固定值true，当LazyColumn复用列表项时，pointerInput的协程作用域不会随列表项数据（thing）变化而重建，导致手势回调（onTap/onLongPress）中引用的thing仍是旧复用项的实例，因此首次点击会跳转到错误的详情页。

另外，自定义onPress中的tryAwaitRelease()会阻塞协程，加剧了复用场景下的状态混乱，延迟了手势识别的释放逻辑，导致列表滚动时的状态更新无法及时同步到手势回调中。

方案1：修复detectTapGestures的pointerInput Key #

将pointerInput的key设置为列表项的唯一标识（thing.thing.id），确保每个列表项的手势识别作用域独立，避免复用问题：

@Composable
fun ThingListItem(
    thing: ThingAndImage,
    navController: NavController,
    // ... 其他参数
) {
    // ... 其他代码
    ListItem(
        // ... 其他配置
        modifier = modifier
            .onSizeChanged {
                itemHeight = with(density) { it.height.toDp() }
            }
            .indication(interactionSource, LocalIndication.current)
            // 用item的唯一ID作为key，确保每个item的手势作用域独立
            .pointerInput(thing.thing.id) {
                detectTapGestures(
                    // 移除自定义onPress，用默认indication处理按压反馈
                    onLongPress = { offset ->
                        pressOffset = DpOffset(offset.x.toDp(), offset.y.toDp())
                        getFavStatus(thing.thing)
                        isContextMenuVisible = true
                    },
                    onTap = {
                        navController.navigate("${ScreenRoutes.ThingDetails}/${thing.thing.id}")
                    }
                )
            }
    )
    // ... DropdownMenu实现
}

方案2：combinedClickable结合偏移量监听 #

如果偏好使用combinedClickable，可以通过额外的pointerInput监听长按偏移量，同时保留combinedClickable的稳定导航逻辑：

@Composable
fun ThingListItem(
    thing: ThingAndImage,
    navController: NavController,
    // ... 其他参数
) {
    var pressOffset by remember { mutableStateOf(DpOffset.Zero) }
    val interactionSource = remember { MutableInteractionSource() }
    val density = LocalDensity.current

    ListItem(
        // ... 其他配置
        modifier = modifier
            .onSizeChanged {
                itemHeight = with(density) { it.height.toDp() }
            }
            // 单独监听长按获取偏移量
            .pointerInput(thing.thing.id) {
                detectTapGestures(
                    onLongPress = { offset ->
                        pressOffset = DpOffset(offset.x.toDp(), offset.y.toDp())
                    }
                )
            }
            .combinedClickable(
                interactionSource = interactionSource,
                indication = LocalIndication.current,
                onClick = {
                    navController.navigate("${ScreenRoutes.ThingDetails}/${thing.thing.id}")
                },
                onLongClick = {
                    getFavStatus(thing.thing)
                    isContextMenuVisible = true
                }
            )
    )
    // ... DropdownMenu使用pressOffset定位
}

补充：DropdownMenu定位优化 #

确保下拉菜单使用获取到的偏移量准确定位：

DropdownMenu(
    expanded = isContextMenuVisible,
    onDismissRequest = { isContextMenuVisible = false },
    offset = pressOffset,
    modifier = Modifier.width(180.dp)
) {
    // ... 菜单选项实现
}

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