Jetpack Compose中如何让复选框相对图片固定位置适配多屏幕？

我刚学Kotlin，用Jetpack Compose开发一款考古遗址骨骼记录App，需要适配不同屏幕尺寸。核心功能是打开骨骼图片后，点击图片上的复选框标记已发现的骨骼碎片，要求复选框必须精准对应图片碎片位置。但在不同屏幕尺寸的模拟器测试时，复选框位置会偏移。我已经通过点击日志提取了复选框在图片上的相对坐标（示例如下，x/y为图片宽高的比例值），但不知道怎么转换成Modifier.offset()需要的x、y值，求修改代码实现无论屏幕/图片尺寸如何，复选框都精准定位。

示例相对坐标：

2024-09-23 10:38:32.021 5058-5058 Image click com.example.logger D x: 0.5133263, y: 0.37671298
2024-09-23 10:38:33.768 5058-5058 Image click com.example.logger D x: 0.21499948, y: 0.45003778
2024-09-23 10:38:36.898 5058-5058 Image click com.example.logger D x: 0.8219602, y: 0.45003778

现有代码模板：

BoxWithConstraints(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.onSecondaryContainer),
            contentAlignment = Alignment.Center
        ) {
            val imageWidth = maxWidth
            val imageHeight = maxHeight

            Box(
                contentAlignment = Alignment.Center
            ) {
                Image(
                    painter = painterResource(R.drawable.hyd),
                    contentDescription = "Image of hyoid",
                    modifier = Modifier.fillMaxSize(0.9f)
                )

                checkedStates.forEachIndexed { index, checked ->
                        // position a checkbox 
                        Checkbox(
                            checked = checked,
                            onCheckedChange = changes[index],
                            modifier = Modifier.offset(x = ?, y = ?)
                        )
                    }
                }
            }
        }

要实现复选框的精准适配，核心是基于图片实际显示的宽高，结合相对坐标计算偏移量，同时要处理复选框自身的尺寸偏移（因为offset默认以复选框左上角为原点，需要调整到坐标对应位置的中心）。

步骤1：封装相对坐标数据 #

先把提取的相对坐标封装成数据类，方便批量管理：

data class BoneMarker(val relativeX: Float, val relativeY: Float)

将示例坐标存入列表：

val markers = listOf(
    BoneMarker(0.5133263f, 0.37671298f),
    BoneMarker(0.21499948f, 0.45003778f),
    BoneMarker(0.8219602f, 0.45003778f)
)

步骤2：获取图片真实显示尺寸 #

图片用fillMaxSize(0.9f)只是占父容器的比例，实际显示尺寸受自身宽高比影响，必须监听真实渲染后的尺寸：

var imageSize by remember { mutableStateOf(Size.Zero) }

Image(
    painter = painterResource(R.drawable.hyd),
    contentDescription = "Image of hyoid",
    modifier = Modifier
        .fillMaxSize(0.9f)
        .onGloballyPositioned { coordinates ->
            imageSize = coordinates.size.toSize()
        },
    contentScale = ContentScale.Fit // 保持图片原始比例，避免拉伸导致坐标偏移
)

步骤3：计算复选框偏移量 #

1. 计算图片在父容器中的起始坐标（因图片居中，起始位置为父容器与图片尺寸的差值的一半）
2. 结合相对坐标算出标记点的绝对坐标
3. 调整复选框偏移：减去自身尺寸的一半，让复选框中心对准标记点

完整修改代码 #

BoxWithConstraints(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colorScheme.onSecondaryContainer),
    contentAlignment = Alignment.Center
) {
    // 定义标记点相对坐标
    data class BoneMarker(val relativeX: Float, val relativeY: Float)
    val markers = listOf(
        BoneMarker(0.5133263f, 0.37671298f),
        BoneMarker(0.21499948f, 0.45003778f),
        BoneMarker(0.8219602f, 0.45003778f)
    )

    var imageSize by remember { mutableStateOf(Size.Zero) }
    val checkboxSize = CheckboxDefaults.Size.toFloat()

    Box(contentAlignment = Alignment.Center) {
        Image(
            painter = painterResource(R.drawable.hyd),
            contentDescription = "Image of hyoid",
            modifier = Modifier
                .fillMaxSize(0.9f)
                .onGloballyPositioned { coordinates ->
                    imageSize = coordinates.size.toSize()
                },
            contentScale = ContentScale.Fit
        )

        checkedStates.forEachIndexed { index, checked ->
            val marker = markers[index]
            // 图片在父容器中的起始位置
            val imageStartX = (maxWidth.value - imageSize.width) / 2
            val imageStartY = (maxHeight.value - imageSize.height) / 2

            // 标记点绝对坐标
            val markerX = imageStartX + (imageSize.width * marker.relativeX)
            val markerY = imageStartY + (imageSize.height * marker.relativeY)

            // 调整偏移让复选框中心对准标记点
            val offsetX = markerX - (checkboxSize / 2)
            val offsetY = markerY - (checkboxSize / 2)

            Checkbox(
                checked = checked,
                onCheckedChange = changes[index],
                modifier = Modifier.offset(
                    x = offsetX.dp,
                    y = offsetY.dp
                )
            )
        }
    }
}

关键注意点 #

• 必须设置contentScale = ContentScale.Fit：图片拉伸会导致相对坐标失效，保持比例才能保证标记点对应正确位置
• 用onGloballyPositioned获取真实尺寸：避免因图片宽高比差异导致的计算误差
• 调整复选框自身偏移：解决offset以左上角为基准的定位偏差

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