Jetpack Compose中如何调整文本大小以适配单行显示

我正在开发首个Jetpack Compose项目，在标题页及其他区域需要使用单个单词的大字号标题文本。模拟器测试显示正常，但真机上部分末尾字符因无法容纳而换行。请问如何调整文本大小，使其在所有设备上均能适配单行显示？

我的Typography配置如下：

val Typography = Typography(
    headlineMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 36.sp,
        letterSpacing = 1.sp
    ),
    labelLarge = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 32.sp,
        letterSpacing = 0.5.sp
    ),
    labelMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 28.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.5.sp
    ),
    labelSmall = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Medium,
        fontSize = 24.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    ),
    titleMedium = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 50.sp,
        letterSpacing = 6.sp
    ),
    titleSmall = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 40.sp,
        letterSpacing = 4.sp
    ),
    titleLarge = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 40.sp,
        lineHeight = 60.sp,
        letterSpacing = 8.sp
    ), 
)

方法1：手动计算文本宽度动态调整字号 #

通过测量文本实际宽度和容器可用宽度，按比例缩小字号，确保文本刚好适配单行：

@Composable
fun AdaptiveSingleWordTitle(text: String, style: TextStyle) {
    val textMeasurer = rememberTextMeasurer()
    val availableWidth = LocalConfiguration.current.screenWidthDp.dp.toPx() - 32.dp.toPx() // 减去左右边距
    val textLayoutResult = textMeasurer.measure(text = text, style = style)
    val textWidth = textLayoutResult.size.width.toFloat()

    val adaptiveFontSize = with(LocalDensity.current) {
        if (textWidth > availableWidth) {
            (style.fontSize.value * availableWidth / textWidth).sp
        } else {
            style.fontSize
        }
    }

    Text(
        text = text,
        style = style.copy(fontSize = adaptiveFontSize),
        maxLines = 1,
        softWrap = false,
        modifier = Modifier.fillMaxWidth()
    )
}

// 使用示例
AdaptiveSingleWordTitle("YourTitle", MaterialTheme.typography.titleLarge)

方法2：使用自适应文本组件 #

利用Compose的AutoSizeText（需确保依赖支持），自动调整字号适配容器：

AutoSizeText(
    text = "YourSingleWordTitle",
    style = MaterialTheme.typography.titleLarge,
    maxLines = 1,
    modifier = Modifier.fillMaxWidth(),
    minFontSize = 24.sp, // 限制最小字号，避免过小
    maxFontSize = 40.sp // 对应原配置的最大字号
)

方法3：改用相对尺寸定义Typography #

放弃固定sp值，改用屏幕宽度百分比设置字号，确保在不同设备上占比一致：

val Typography = Typography(
    titleLarge = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = LocalConfiguration.current.screenWidthDp.dp * 0.1.sp, // 占屏幕宽度10%
        lineHeight = LocalConfiguration.current.screenWidthDp.dp * 0.15.sp,
        letterSpacing = 8.sp
    ),
    // 其他样式配置...
)

关键注意点 #

• 必须设置maxLines = 1和softWrap = false，强制文本单行显示
• 计算可用宽度时要扣除容器的内边距/外边距，避免文本超出视觉边界
• 建议设置最小字号阈值，防止在极小屏幕上字体可读性下降

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