Jetpack Compose中如何绘制无内边距文本以填满容器？

你当前的代码已经设置了PlatformTextStyle(includeFontPadding = false)，但测量出的文本尺寸（红框）仍包含字体自带的上下留白，导致无法填满容器。要实现无内边距的文本填充，需要从移除字体留白和动态适配容器尺寸两方面调整：

核心解决方案 #

1. 精准计算文本实际可视高度：放弃使用result.size.height（包含字体留白），改用文本基线（firstBaseline和lastBaseline）计算真正的字形高度，这是文本实际占据的可视区域。
2. 动态适配容器的缩放比例：不再硬编码缩放值，根据容器尺寸和文本实际尺寸计算缩放比例，确保文本刚好填满容器。
3. 清除额外行间距：设置lineHeight = TextUnit.Unspecified，避免行高带来的多余空间。

修改后的完整代码 #

@Composable
fun NumberBox(
    number: Int,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    style: TextStyle = LocalTextStyle.current
) {
    val mergedStyle = style.merge(
        TextStyle(
            color = color,
            fontSize = 40.sp,
            fontWeight = fontWeight,
            textAlign = textAlign,
            fontFamily = fontFamily,
            textDecoration = textDecoration,
            fontStyle = fontStyle,
            platformStyle = PlatformTextStyle(includeFontPadding = false),
            // 让行高自动匹配字体实际高度，消除额外行间距
            lineHeight = TextUnit.Unspecified
        )
    )

    val measurer = rememberTextMeasurer()
    val text = number.toString()
    val result = measurer.measure(
        text,
        style = mergedStyle,
        maxLines = 1,
    )

    Canvas(modifier = modifier, onDraw = {
        // 计算文本真正的可视高度（基于基线，去掉字体自带的上下留白）
        val actualGlyphHeight = result.lastBaseline - result.firstBaseline
        val textWidth = result.size.width

        // 计算缩放比例：保持宽高比的话取最小比例，需要拉伸则分别用X/Y轴比例
        val scaleX = size.width / textWidth
        val scaleY = size.height / actualGlyphHeight
        val scale = minOf(scaleX, scaleY)

        // 计算缩放后的文本尺寸与居中偏移
        val scaledWidth = textWidth * scale
        val scaledHeight = actualGlyphHeight * scale
        val translateX = (size.width - scaledWidth) / 2
        // 平移时要考虑基线的偏移，确保文本垂直居中
        val translateY = (size.height - scaledHeight) / 2 + result.firstBaseline * scale

        withTransform({
            translate(translateX, translateY)
            scale(scale)
        }) {
            drawText(
                textLayoutResult = result,
                color = Color.Blue,
            )
            // 调试用：绘制基线
            drawLine(
                color = Color.Green,
                start = Offset(0f, result.firstBaseline),
                end = Offset(textWidth, result.firstBaseline),
            )
            drawLine(
                color = Color.Green,
                start = Offset(0f, result.lastBaseline),
                end = Offset(textWidth, result.lastBaseline),
            )
            // 绘制实际字形的边界（代替原来的文本整体尺寸红框）
            drawRect(
                color = Color.Red,
                topLeft = Offset(0f, result.firstBaseline - (result.size.height - result.lastBaseline)),
                size = Size(textWidth, actualGlyphHeight),
                style = Stroke()
            )
        }
    })
}

关键细节说明 #

• 基线计算高度：actualGlyphHeight = result.lastBaseline - result.firstBaseline，这个值是文本字形真正的垂直高度，排除了字体设计时自带的上下留白。
• 动态缩放：根据容器宽高和文本实际尺寸计算缩放比例，确保文本填满容器的同时，可选保持宽高比避免变形。
• 平移校准：垂直平移时加入result.firstBaseline * scale的偏移，是因为文本绘制的原点是基线位置，需要校准才能让文本垂直居中。

如果使用的字体本身设计有细微的边缘留白，可能需要微调缩放比例（比如乘以1.02），或者更换无多余留白的字体来达到完美填充效果。

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