Jetpack Compose中如何将按钮按偏移准确定位到图片指定位置

• 坐标系不统一：detectTapGestures返回的是经过缩放、滚动变换后的组件局部像素坐标，而你给Button调用的.offset()使用的是外层Box的布局dp坐标，两个坐标系参考基准完全不同，数值自然不匹配。
• 单位混用：手势返回的Offset单位是像素(px)，你直接将px数值作为dp值传入.offset()，不同设备像素密度不同，数值会差出整倍的密度系数，这也是你直接使用it.coordinates.x.dp时按钮直接飞出可视区域消失的主要原因。
• 层级错误：你将滚动、缩放效果只加在了Image组件上，Button是Image的同级组件，不会跟随Image的滚动、缩放同步位移，就算坐标转换正确，缩放/滚动图片时按钮也会停在原位置，和图片点位错位。

1. 统一变换容器：将滚动、缩放、手势识别的modifier从Image上移到包裹Image和所有按钮的父容器上，保证图片和标记按钮的变换规则完全一致，滚动、缩放时同步移动。
2. 坐标换算：手势拿到的点击像素坐标，需要先除以当前缩放值、加上滚动偏移量，得到图片原始坐标系下的像素位置，再通过设备密度转换为dp值，才能传入.offset()使用。
3. 单位转换：禁止直接将px值拼接.dp使用，必须通过LocalDensity做正式的单位转换。

val density = LocalDensity.current
// 保留你原有的缩放、滚动状态定义
var scale by remember { mutableStateOf(1f) }
val vScrollState = rememberScrollState()
val hScrollState = rememberScrollState()

Surface(modifier = Modifier.fillMaxSize()) {
    Box {
        // 统一的变换容器，承载滚动、缩放、手势逻辑
        Box(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(
                    state = vScrollState,
                    enabled = true,
                    reverseScrolling = true
                )
                .horizontalScroll(
                    state = hScrollState,
                    enabled = true,
                    reverseScrolling = true
                )
                .graphicsLayer(
                    scaleX = maxOf(1f, minOf(3f, scale)),
                    scaleY = maxOf(1f, minOf(3f, scale)),
                )
                .pointerInput(Unit) {
                    detectTapGestures { tapOffset ->
                        // 坐标转换：变换后坐标 -> 图片原始坐标
                        val rawXInPx = (tapOffset.x / scale) + hScrollState.value
                        val rawYInPx = (tapOffset.y / scale) + vScrollState.value
                        // px转dp
                        val rawXInDp = with(density) { rawXInPx.toDp() }
                        val rawYInDp = with(density) { rawYInPx.toDp() }
                        // 此时rawXInDp、rawYInDp和Button的offset坐标系完全一致
                        Log.i("==>Valid Offset: ", "x: $rawXInDp, y: $rawYInDp")
                    }
                }
        ) {
            Image(
                bitmap = ImageBitmap.imageResource(R.drawable.kleinebitmaptestskizzeroterrand2),
                contentDescription = "Marktansicht",
                modifier = Modifier.fillMaxSize()
            )

            // 标记按钮和图片在同一容器下，同步跟随变换
            shopping.forEach { item ->
                Button(
                    modifier = Modifier
                        // 如果item.coordinates存储的是px值，也需要先转dp再传入
                        .offset(item.coordinates.x.dp, item.coordinates.y.dp)
                        .size(10.dp),
                    onClick = { /* 你的点击逻辑 */ }
                ) {
                    Text(
                        modifier = Modifier.padding(
                            top = ProjectTheme.paddings.tiny,
                            bottom = ProjectTheme.paddings.tiny
                        ),
                        style = ProjectTheme.typography.h6,
                        text = item.name
                    )
                }
            }
        }
    }
}

注意：如果你存储的item.coordinates是手势直接获取的原始px值，也需要按照上述转换逻辑转成dp后再传入offset，不要直接调用.dp扩展。

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