如何在Jetpack Compose的Canvas中让Circle与Text保持指定间距？

问题分析 #

你当前代码里Circle的位置是基于Canvas中心的一半独立计算的，和Text的绘制位置没有关联，导致两者间距不可控。要让Circle和Text保持固定15.dp的间距，必须基于Text的实际绘制坐标来推导Circle的位置。

修正后的代码 #

@OptIn(ExperimentalTextApi::class)
@Preview(showBackground = true)
@Composable
fun CanvasView() {
    val textMeasurer = rememberTextMeasurer()
    val textToDraw = "Lab Return"
    val style = TextStyle(
        fontSize = 16.sp,
        color = Color.Black,
    )
    val textLayoutResult = remember(textToDraw) {
        textMeasurer.measure(textToDraw, style)
    }
    // 提取固定参数，方便维护
    val circleRadius = 6.dp.toPx()
    val desiredSpacing = 15.dp.toPx()

    Canvas(modifier = Modifier.fillMaxSize()) {
        // 先计算Text的居中起始坐标
        val textTopLeft = Offset(
            x = center.x - textLayoutResult.size.width / 2,
            y = center.y - textLayoutResult.size.height / 2,
        )
        // 绘制文本
        drawText(
            textMeasurer = textMeasurer,
            text = textToDraw,
            style = style,
            topLeft = textTopLeft
        )

        // 基于Text位置计算Circle的中心坐标
        val circleCenter = Offset(
            // 从Text左侧边缘向左偏移：间距 + 圆形半径，保证边缘间距为15.dp
            x = textTopLeft.x - desiredSpacing - circleRadius,
            // 垂直方向与Text居中对齐
            y = textTopLeft.y + textLayoutResult.size.height / 2
        )
        // 绘制圆形
        drawCircle(
            color = Color.Gray,
            radius = circleRadius,
            center = circleCenter
        )
    }
}

关键调整说明 #

• 将Text的起始坐标提取为变量textTopLeft，让Circle的位置和Text强关联，避免独立计算导致的偏移
• Circle的x轴坐标：通过textTopLeft.x - desiredSpacing - circleRadius确保圆形边缘到文本边缘的间距严格为15.dp
• Circle的y轴坐标：基于Text的高度计算中心位置，比直接用Canvas中心更精准，适配不同字号的文本

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