如何在Jetpack Compose中为字符串资源指定部分添加强调样式？

需求：渲染包含“已完成x项任务，共y项”格式的字符串资源，对其中的动态数值x和y添加强调（如加粗）样式。

无需字符串资源的简单实现 #

如果不需要复用字符串资源，可直接用buildAnnotatedString DSL构建带样式的字符串：

val x = "2"
val y = "10"

val annotatedString = buildAnnotatedString {
    append("已完成")
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append(x) }
    append("项任务，共")
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append(y) }
    append("项")
}

Text(annotatedString)

使用字符串资源时的常见误区 #

当使用字符串资源（便于多语言适配）时，直接拼接后添加样式会遇到定位难题，以下是两种不可取的方案：

误区1：通过索引定位添加样式 #

尝试通过字符串索引找到数值位置并添加样式：

val formattedString = stringResource(R.string.task_count, 2, 10)
val xStr = "2"
val yStr = "10"

val annotatedString = buildAnnotatedString {
    append(formattedString)
    val xPos = formattedString.indexOf(xStr)
    addStyle(SpanStyle(fontWeight = FontWeight.Bold), xPos, xPos + xStr.length)
    val yPos = formattedString.indexOf(yStr)
    addStyle(SpanStyle(fontWeight = FontWeight.Bold), yPos, yPos + yStr.length)
}

缺陷：当x和y数值相同时（如“已完成10项任务，共10项”），indexOf只会返回第一个匹配的位置，导致样式添加错误。

误区2：拆分字符串资源 #

将字符串拆分为多个部分分别定义：

<string name="task_pt1">已完成</string>
<string name="task_pt2">项任务，共</string>
<string name="task_pt3">项</string>

然后拼接构建带样式的字符串：

val annotatedString = buildAnnotatedString {
    append(stringResource(R.string.task_pt1))
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("2") }
    append(stringResource(R.string.task_pt2))
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("10") }
    append(stringResource(R.string.task_pt3))
}

缺陷：严重影响多语言适配，部分语言可能需要调整数值的位置（如“共10项任务，已完成2项”），拆分后的资源无法灵活适配这种语法差异。

正确解决方案 #

方案1：利用HTML标签的字符串资源（最简洁） #

直接在字符串资源中使用HTML强调标签包裹占位符，通过Compose的annotatedStringResource加载即可自动解析样式：

步骤1：定义带HTML标签的字符串资源

<string name="task_count">已完成&lt;b&gt;%1$d&lt;/b&gt;项任务，共&lt;b&gt;%2$d&lt;/b&gt;项</string>

注意：XML中需用转义字符<和>代替<和>，避免被XML解析器误处理。

步骤2：在Compose中使用

val x = 2
val y = 10

val annotatedString = annotatedStringResource(R.string.task_count, x, y)
Text(annotatedString)

该方案既保留了字符串资源的完整性，完美支持多语言适配，又能直接为动态数值添加加粗样式。

方案2：原生SpannableString转换（灵活定制样式） #

如果需要自定义复杂样式（如颜色、斜体等），可使用Android原生SpannableString构建带样式的字符串，再转换为Compose的AnnotatedString：

步骤1：定义普通字符串资源

<string name="task_count">已完成%1$d项任务，共%2$d项</string>

步骤2：构建并转换SpannableString

val x = 2
val y = 10
val baseString = getString(R.string.task_count, x, y)
val xStr = x.toString()
val yStr = y.toString()

// 构建SpannableString
val spannable = SpannableString(baseString)

// 为x添加样式
var currentPos = 0
while (currentPos < baseString.length) {
    val xIndex = baseString.indexOf(xStr, currentPos)
    if (xIndex == -1) break
    spannable.setSpan(
        StyleSpan(Typeface.BOLD), // 可替换为ForegroundColorSpan(Color.Red)等自定义Span
        xIndex,
        xIndex + xStr.length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
    currentPos = xIndex + xStr.length
}

// 为y添加样式，避免和x的位置重复（当x=y时）
currentPos = 0
while (currentPos < baseString.length) {
    val yIndex = baseString.indexOf(yStr, currentPos)
    if (yIndex == -1) break
    // 检查当前位置是否已被x的样式覆盖
    val existingSpans = spannable.getSpans(yIndex, yIndex + yStr.length, StyleSpan::class.java)
    if (existingSpans.isEmpty()) {
        spannable.setSpan(
            StyleSpan(Typeface.BOLD),
            yIndex,
            yIndex + yStr.length,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
    }
    currentPos = yIndex + yStr.length
}

// 转换为Compose的AnnotatedString
val annotatedString = AnnotatedString.from(spannable)

// 在Compose中渲染
Text(annotatedString)

该方案适合需要自定义复杂样式的场景，同时保证字符串资源的完整性和多语言适配性。

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