如何通过Jetpack Compose在同一Text视图中显示多颜色文本

在Jetpack Compose中无需嵌套多个Text组件，直接给Text传入AnnotatedString即可实现同组件内的多颜色、多样式混排，是官方推荐的最优实现方案，不存在基线对齐问题，长文本渲染性能更好。

核心实现：使用buildAnnotatedString 构造分段样式文本 #

通过buildAnnotatedString提供的DSL，可以给任意区间的文本单独设置字符级样式（颜色、字重、字号、字体、装饰线等）、段落级样式（行高、缩进、对齐等），甚至局部点击事件、内联组件。
基础示例代码：

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.sp
import androidx.compose.material3.Text

@Composable
fun MultiStyleTextDemo() {
    Text(
        buildAnnotatedString {
            // 第一段：红色粗体
            withStyle(SpanStyle(
                color = Color.Red,
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp
            )) {
                append("红色粗体内容 ")
            }

            // 第二段：绿色常规字
            withStyle(SpanStyle(
                color = Color.Green,
                fontSize = 14.sp
            )) {
                append("绿色常规内容 ")
            }

            // 第三段：蓝色斜体下划线
            withStyle(SpanStyle(
                color = Color.Blue,
                fontStyle = FontStyle.Italic,
                textDecoration = TextDecoration.Underline,
                fontSize = 18.sp
            )) {
                append("蓝色斜体下划线内容")
            }
        }
    )
}

扩展能力 #

• 局部点击：如果需要给部分文本加点击事件，把外层Text替换为ClickableText，搭配pushStringAnnotation标记点击区间即可实现
• 内联组件：通过appendInlineContent方法，可以在文本流中插入图标、标签等任意Compose组件
• 段落样式：需要设置整段行高、首行缩进、段间距等属性时，使用ParagraphStyle替代SpanStyle传入即可

效果参考：

踩坑提示：不要用Row嵌套多个Text的方式实现混排，这种方案会出现不同字号文本基线错位的问题，且长文本场景下渲染性能远低于AnnotatedString方案。

内容的提问来源于stack exchange，提问作者Ajith M A