Android Jetpack Compose：Text组件传不同文本参数样式不匹配求助

在Jetpack Compose中，两个Text组件使用相同的TextStyle配置，但一个接收AnnotatedString参数，另一个接收String参数，最终显示的文本样式存在差异（尤其是letterSpacing），导致每行单词数不同，无法实现外观完全一致。

示例代码 #

val font by remember {
    mutableStateOf(
            FontFamily(
                    Font(R.font.roboto_bold, weight = FontWeight.Bold),
                    Font(R.font.roboto_medium, weight = FontWeight.Medium),
                    Font(R.font.roboto)
            )
    )
}
val textStyle by remember {
    mutableStateOf(
            TextStyle(
                    fontFamily = font,
                    fontWeight = FontWeight.W400,
                    fontSize = 14.sp,
                    lineHeight = 20.sp,
                    letterSpacing = 0.25.sp,
            )
    )
}
Text(
        modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
        text = AnnotatedString(
                text = loremIpsum,
                spanStyle = textStyle.toSpanStyle(),
                paragraphStyle = textStyle.toParagraphStyle()
        ),
        style = textStyle
)
Divider()
Text(
        modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
        text = loremIpsum,
        style = textStyle
)

差异表现 #

解决方案 #

方案1：避免重复设置样式 #

如果不需要富文本格式，仅使用AnnotatedString传递文本内容，样式完全通过Text组件的style参数控制：

Text(
    modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
    text = AnnotatedString(text = loremIpsum),
    style = textStyle
)
Divider()
Text(
    modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
    text = loremIpsum,
    style = textStyle
)

方案2：通过buildAnnotatedString统一样式 #

如果需要使用富文本能力，使用buildAnnotatedString构建内容，确保样式一次性设置，避免与Text组件的style参数冲突：

Text(
    modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
    text = buildAnnotatedString {
        withStyle(
            style = SpanStyle(
                fontFamily = font,
                fontWeight = FontWeight.W400,
                fontSize = 14.sp,
                letterSpacing = 0.25.sp
            ) + ParagraphStyle(
                lineHeight = 20.sp
            )
        ) {
            append(loremIpsum)
        }
    }
)
Divider()
Text(
    modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp),
    text = loremIpsum,
    style = textStyle
)

原因分析 #

原代码中同时给AnnotatedString和Text组件设置了相同样式，导致样式叠加或解析逻辑冲突。toSpanStyle()和toParagraphStyle()的转换可能存在细节差异，或者AnnotatedString的样式处理逻辑与直接传String时的letterSpacing计算方式不同，最终引发显示差异。

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