Jetpack Compose中如何在Canvas里居中显示文本？

你当前的代码是把文本的左上角定位在Canvas中心，导致文本整体偏右下，无法实现真正的居中。要解决这个问题，需要先测量文本的实际宽高，再计算出让文本居中的偏移量。

以下是修改后的完整代码：

@OptIn(ExperimentalTextApi::class)
@Composable
fun MyCenterTextInCanvas() {
    val width: Dp = 200.dp
    val height: Dp = 40.dp
    val textMeasurer = rememberTextMeasurer()
    Canvas(
        modifier = Modifier
            .background(Color.LightGray)
            .requiredSize(width = width, height = height),
    ) {
        // 先测量文本的布局信息
        val textLayoutResult = textMeasurer.measure(text = "Sample Text")
        val textWidth = textLayoutResult.size.width
        val textHeight = textLayoutResult.size.height

        // 计算文本居中的偏移量：Canvas尺寸减去文本尺寸的一半
        val offsetX = (size.width - textWidth) / 2f
        val offsetY = (size.height - textHeight) / 2f

        drawText(
            textMeasurer = textMeasurer,
            text = "Sample Text",
            topLeft = Offset(x = offsetX, y = offsetY)
        )
    }
}

关键说明： #

• textMeasurer.measure() 方法可以获取文本的实际宽高（textLayoutResult.size），这是计算偏移的核心依据
• 偏移量的计算逻辑：将文本左上角的位置调整为「Canvas尺寸的一半减去文本尺寸的一半」，这样文本的中心点就会和Canvas的中心点重合
• 移除了多余的wrapContentSize修饰符，因为已经用requiredSize固定了Canvas尺寸，该修饰符不会影响Canvas内部的绘制逻辑

如果需要更精准的垂直基线对齐，可以结合textLayoutResult.lastBaseline调整垂直偏移，例如：

val baselineOffset = (size.height - textLayoutResult.lastBaseline) / 2f
drawText(
    textMeasurer = textMeasurer,
    text = "Sample Text",
    topLeft = Offset(x = offsetX, y = baselineOffset)
)

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