如何在Jetpack Compose中让文本精确居中于圆形内部？

要实现文本自动居中于圆形内，核心是先测量文本的实际尺寸，再通过计算得到正确的topLeft偏移量，让文本的几何中心与圆心重合。具体步骤如下：

1. 使用textMeasurer测量文本的布局信息，获取文本的边界矩形尺寸
2. 计算文本左上角的偏移：用圆心坐标分别减去文本宽度的一半、文本高度的一半

修改后的完整代码如下：

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Green.copy(alpha = 0.2f))
        .padding(36.dp),
    contentAlignment = Alignment.Center
) {
    val textMeasurer = rememberTextMeasurer()
    val textToDraw = "A"
    Canvas(modifier = Modifier.fillMaxSize()) {
        // 绘制圆形
        drawCircle(
            center = center,
            radius = 350f,
            color = Color.Blue,
            style = Stroke(width = 8f)
        )

        // 测量文本尺寸
        val textLayoutResult = textMeasurer.measure(
            text = textToDraw,
            style = TextStyle(
                fontSize = 150.sp,
                color = Color.Black,
                background = Color.Red.copy(alpha = 0.2f)
            )
        )
        // 计算文本居中的topLeft偏移
        val textOffset = Offset(
            x = center.x - textLayoutResult.size.width / 2f,
            y = center.y - textLayoutResult.size.height / 2f
        )

        // 绘制居中的文本
        drawText(
            textMeasurer = textMeasurer,
            text = textToDraw,
            style = TextStyle(
                fontSize = 150.sp,
                color = Color.Black,
                background = Color.Red.copy(alpha = 0.2f)
            ),
            topLeft = textOffset
        )

        // 绘制圆心标记
        drawPoints(
            points = listOf(center),
            pointMode = PointMode.Points,
            cap = StrokeCap.Round,
            color = Color.Red,
            strokeWidth = 25f
        )
    }
}

关键说明： #

• textMeasurer.measure()方法返回的TextLayoutResult包含了文本的实际宽高（size.width和size.height）
• 通过center.x - 文本宽度/2和center.y - 文本高度/2计算出的偏移，能确保文本的几何中心与圆心完全重合
• 这种方式能自动适配不同的文本内容、字号、字体，不需要手动调整固定数值

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