如何在Jetpack Compose中为文本部分内容设置差异化样式？

我正在Jetpack Compose中复刻一段UI文本，目标效果如下：

1. Click the button below to copy the one time code.

样式要求：

• 数字1.需使用不同颜色、更大字号；
• 列表项1.中1与点.之间需有间距；
• 短语"one time code"需加粗；
• 句子其余部分使用常规样式。

请问在Jetpack Compose中构建并设置此类文本样式的最佳方式是什么？应该使用AnnotatedString、TextSpan还是有更好的方案？

我尝试了如下代码，但实际输出与预期不符：

@Composable
fun StepItem(number: String, text: String, styleCode: String) {
    Row(verticalAlignment = Alignment.Top, modifier = Modifier.padding(start = 20.dp)) {
        Text(
            text = number,
            style = MaterialTheme.typography.bodyMedium.copy(
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colorScheme.primary,
                fontSize = 20.sp
            ),
        )
        Text(
            buildAnnotatedString {
                append(text)
                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                    append(styleCode)
                }
            },
            style = MaterialTheme.typography.bodyMedium
        )
    }
}

更新：调整代码后已实现需求，最终代码如下：

Row {
    Text(
        text = "1.",
        style = MaterialTheme.typography.bodyMedium.copy(
            fontWeight = FontWeight.SemiBold,
            color = MaterialTheme.colorScheme.primary,
            fontSize = 25.sp
        ),
    )

    Spacer(modifier = Modifier.width(MaterialTheme.spacing.spaceExtraSmall))

    // 带部分加粗样式的主文本
    Text(
        buildAnnotatedString {
            append("Click the button below to copy the ")
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                append("one time code")
            }
            append(".")
        },
        style = MaterialTheme.typography.bodyMedium.copy(
            baselineShift = BaselineShift(-0.4f),
        )
    )
}

最佳实现方案解析 #

对于这类包含局部样式差异的文本，AnnotatedString + 多Text组件组合是Jetpack Compose中的最优选择，原因如下：

1. 拆分独立样式元素：将数字编号和主体文本拆分为两个Text组件，能更灵活地控制编号的颜色、字号，以及编号与主体文本的间距（通过Spacer实现），完全满足"1与点之间有间距"的要求。
2. 局部文本样式控制：主体文本中需要加粗的部分，使用buildAnnotatedString配合SpanStyle来实现局部加粗，这是Compose中处理文本内多样式的标准方式，比Android View系统的TextSpan更适配Compose的声明式范式。

你最终的代码已经很好地覆盖了所有需求：

• 用独立Text组件设置编号的特殊样式；
• 通过Spacer控制编号与主体文本的间距；
• 用AnnotatedString实现"one time code"的加粗；
• 调整baselineShift让主体文本和编号的基线对齐，保证视觉上的协调。

如果要让组件更通用，可以将编号、主体文本内容、加粗文本片段抽成参数，封装成可复用的StepItem组件，比如：

@Composable
fun StepItem(
    stepNumber: Int,
    prefixText: String,
    boldText: String,
    suffixText: String,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
        // 处理1和点之间的间距，直接在字符串中加入空格
        Text(
            text = "$stepNumber .",
            style = MaterialTheme.typography.bodyMedium.copy(
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colorScheme.primary,
                fontSize = 25.sp
            ),
        )
        Spacer(modifier = Modifier.width(MaterialTheme.spacing.spaceExtraSmall))
        Text(
            buildAnnotatedString {
                append(prefixText)
                withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
                    append(boldText)
                }
                append(suffixText)
            },
            style = MaterialTheme.typography.bodyMedium.copy(
                baselineShift = BaselineShift(-0.4f)
            )
        )
    }
}

// 使用示例
StepItem(
    stepNumber = 1,
    prefixText = "Click the button below to copy the ",
    boldText = "one time code",
    suffixText = "."
)

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