Jetpack Compose：如何让文本自动缩小适配父Composable宽度

要实现单行文本在超出父容器宽度时自动缩小字体至适配，可通过状态管理结合文本布局监听来实现，修改后的代码如下：

ClickableSurface(
    onClick = onClick,
    modifier = modifier
        .height(labelHeight.dp)
        .fillMaxWidth(),
){
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxWidth()
    ) {
        // 初始化字体大小为8.sp，用状态维护以便动态更新
        var fontSize by remember { mutableStateOf(8.sp) }
        // 存储父容器的宽度，作为文本适配的参考值
        var parentWidth by remember { mutableStateOf(0) }

        Text(
            text = text,
            style = TextStyle(
                fontSize = fontSize,
                fontWeight = FontWeight.Medium,
                color = color100
            ),
            maxLines = 1,
            modifier = Modifier
                .fillMaxWidth()
                // 监听父容器尺寸变化，获取宽度值
                .onSizeChanged { parentWidth = it.width }
                // 监听文本布局结果，判断是否溢出
                .onTextLayout { layoutResult ->
                    val textWidth = layoutResult.size.width
                    // 文本宽度超过父容器，且未达到最小字体限制时，缩小字体
                    if (textWidth > parentWidth && fontSize > 4.sp) {
                        // 可以根据需求调整每次缩小的步长，比如0.5.sp或1.sp
                        fontSize -= 0.5.sp
                    }
                }
        )
    }
}

核心逻辑说明： #

• 状态管理：用mutableStateOf保存字体大小和父容器宽度，确保状态更新时Composable能自动重组刷新
• 尺寸测量：通过onSizeChanged获取父容器的实际宽度，作为文本是否溢出的判断基准
• 布局监听：onTextLayout回调能拿到文本渲染后的实际宽度，对比父容器宽度后动态调整字体大小
• 边界控制：设置最小字体阈值（比如4.sp），避免字体无限缩小影响可读性

如果想要更高效的适配（一步到位调整到合适大小），可以替换onTextLayout内的逻辑为比例计算：

.onTextLayout { layoutResult ->
    val textWidth = layoutResult.size.width
    if (textWidth > parentWidth && fontSize > 4.sp) {
        // 按比例计算所需字体大小，直接调整到适配值
        val scale = parentWidth.toFloat() / textWidth.toFloat()
        fontSize = fontSize * scale
    }
}

内容的提问来源于stack exchange，提问作者Kun.tito