Jetpack Compose中如何实现单Text组件的部分文本着色与点击交互？

完全可以在单个Text组件内实现局部文本着色+局部可点击的需求，不需要拆分多个组件做横向排列拼凑，依托Jetpack Compose原生的文本注解能力即可低成本实现。

• 用AnnotatedString替代普通字符串传入Text组件的text参数，支持在同一个文本流中为不同片段独立配置颜色、字重、字号等样式
• 通过LinkAnnotation为指定文本片段绑定点击回调，无需为单个片段单独挂载交互Modifier，所有文本交互都由外层Text组件统一分发

val authPromptText = buildAnnotatedString {
    // 基础提示文本，自动继承Text组件的全局样式配置
    append("Don't have an account? ")
    // 给需要高亮的Sign Up片段单独配置样式
    withStyle(
        style = SpanStyle(
            color = MaterialTheme.colors.primary,
            fontWeight = FontWeight.Medium
        )
    ) {
        append("Sign Up")
        // 给当前片段绑定可点击交互
        addLink(
            LinkAnnotation.Clickable(
                tag = "sign_up_entry",
                linkInteractionListener = {
                    // 在此处实现Sign Up的点击逻辑，例如跳转注册页面
                }
            )
        )
    }
}

Text(
    text = authPromptText,
    modifier = Modifier.align(Alignment.BottomCenter),
    style = MaterialTheme.typography.h6,
    color = MaterialTheme.colors.secondary
)

• 不建议通过拆分多个Text组件做行内排列实现这类需求：不同屏幕宽度下如果出现自动换行，会导致文本排版错位、可点击区域和视觉显示不对齐的问题，单Text+AnnotatedString的实现可以完美适配换行场景，样式永远和文本位置绑定
• 所有没有通过withStyle单独指定样式的文本片段，会自动继承Text组件全局配置的color、style参数，和原有代码的行为完全兼容，不需要调整其他属性
• 不需要手动计算目标文本的字符起止索引，通过链式append的方式构建文本可以自动匹配位置，彻底避免View体系下Spannable常出现的索引偏移、样式错配问题
• 可点击的文本片段会自动适配系统级的文本选择、辅助功能交互，不会破坏Text组件的默认可访问性能力

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