Jetpack Compose中如何使文本随屏幕尺寸同比例缩放、不受密度影响？

要实现文本随屏幕尺寸同比例缩放，同时不受系统字体设置和屏幕密度调整影响，你需要结合「忽略系统字体缩放」和「基于屏幕尺寸比例调整」两个逻辑，以下是具体实现方案：

核心问题分析 #

你当前的scaledSp()仅处理了系统字体缩放（fontScale），但sp单位本身会和屏幕密度绑定——当屏幕物理尺寸变化时，固定的sp值会导致文本相对屏幕的大小改变。要让文本和屏幕保持固定比例，需要基于屏幕的基准尺寸动态计算文本大小。

解决方案：响应式缩放的Sp扩展函数 #

创建一个Composable扩展函数，同时实现忽略系统字体缩放、按屏幕尺寸比例调整文本大小：

@Composable
fun Int.responsiveScaledSp(): TextUnit {
    // 基准屏幕宽度（以360dp的主流手机为参考，可根据你的设计稿调整）
    val baseScreenWidthDp = 360
    // 获取当前屏幕的宽度（dp单位，不受屏幕密度影响）
    val currentScreenWidthDp = LocalConfiguration.current.screenWidthDp
    // 计算屏幕缩放比例：当前屏幕宽度 / 基准宽度
    val screenScaleRatio = currentScreenWidthDp.toFloat() / baseScreenWidthDp.toFloat()

    val density = LocalDensity.current
    // 先忽略系统字体缩放，再应用屏幕比例缩放
    val adjustedSize = (this / density.fontScale) * screenScaleRatio
    return with(density) { adjustedSize.sp }
}

可选优化：基于最小宽度适配折叠屏 #

如果需要适配折叠屏这类可变尺寸设备，可以改用屏幕最小宽度（smallestScreenWidthDp）来计算比例，确保文本在屏幕折叠/展开时都保持相对大小一致：

@Composable
fun Int.responsiveScaledSp(): TextUnit {
    val baseScreenWidthDp = 360
    // 获取屏幕最小宽度（dp单位，代表屏幕的最短边）
    val currentSmallestWidthDp = LocalConfiguration.current.smallestScreenWidthDp
    val screenScaleRatio = currentSmallestWidthDp.toFloat() / baseScreenWidthDp.toFloat()

    val density = LocalDensity.current
    val adjustedSize = (this / density.fontScale) * screenScaleRatio
    return with(density) { adjustedSize.sp }
}

使用示例 #

将原代码中的30.sp替换为30.responsiveScaledSp()即可：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.fillMaxSize().size(width = 200.dp, height = 100.dp)
) {
    Text(
        text = "Hello World",
        fontSize = 30.responsiveScaledSp(),
        color = Color.White
    )
}

原理说明 #

1. 忽略系统字体缩放：通过this / density.fontScale抵消系统字体大小调整的影响，确保文本大小不受用户系统设置干扰。
2. 屏幕比例缩放：以基准屏幕宽度为参考，按当前屏幕尺寸与基准尺寸的比例放大/缩小文本，保证文本在不同物理尺寸的屏幕上，相对屏幕的大小完全一致。

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