使用Canvas自定义文本Composable时出现空白问题排查

空白产生的原因 #

measuredText.size.height返回的是**像素单位（px）**的文本高度，而你直接给它添加.dp后缀，相当于把像素数值当作dp值使用。由于dp是密度无关单位，在高像素密度的设备上，这种错误转换会让Canvas的高度被大幅放大（比如密度为3的设备，1px会被当成3dp），最终导致底部出现大量空白。

修复方法 #

需要将像素值正确转换为dp，或者直接使用像素单位设置高度：

方法1：使用IntPx直接设置高度 #

利用toIntPx()将像素值转换为Compose支持的IntPx单位，直接设置给height修饰符：

@Composable
fun ShyText(
    text: String,
    modifier: Modifier = Modifier
) {
    val textMeasurer = rememberTextMeasurer()
    val measuredText = textMeasurer.measure(
        AnnotatedString(text),
        overflow = TextOverflow.Ellipsis,
        constraints = Constraints.fixedWidth(1080),
        style = TextStyle(
            fontSize = 18.sp,
        )
    )
    Canvas(
        modifier
            .fillMaxWidth()
            .height(measuredText.size.height.toIntPx())
            .background(Color.DarkGray)
    ) {
        drawText(measuredText)
    }
}

方法2：通过LocalDensity将像素转dp #

借助LocalDensity获取当前设备的密度，将像素值正确转换为dp：

@Composable
fun ShyText(
    text: String,
    modifier: Modifier = Modifier
) {
    val textMeasurer = rememberTextMeasurer()
    val density = LocalDensity.current
    val measuredText = textMeasurer.measure(
        AnnotatedString(text),
        overflow = TextOverflow.Ellipsis,
        constraints = Constraints.fixedWidth(1080),
        style = TextStyle(
            fontSize = 18.sp,
        )
    )
    Canvas(
        modifier
            .fillMaxWidth()
            .height(with(density) { measuredText.size.height.toDp() })
            .background(Color.DarkGray)
    ) {
        drawText(measuredText)
    }
}

两种方法都能让Canvas的高度准确匹配文本实际占用的空间，消除底部空白。

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