android - 部分彩色文本并使其在 Jetpack Compose 中可点击

Question

这个问题在这里已经有了答案:





How to highlight specific word of the text in jetpack compose?

(1 个回答)



Jetpack Compose Text hyperlink some section of the text

(7 个回答)


去年关闭。




对于在 XML 中声明的 View ，我们可以使用 SpannableStringBuilder如此处所述https://stackoverflow.com/a/4897412/9715339为该部分字符串着色。
但是使用 JetPack 组合 Text我无法仅使用单个 Text 来实现相同的效果.
我想要这样的东西。

正如你所看到的，只有“注册”文本有不同的颜色，而且我想使它 可点击 .
这就是我的文本代码目前的样子

Text(text = "Don't have an account? Sign Up",
                        modifier = Modifier.align(Alignment.BottomCenter),
                        style = MaterialTheme.typography.h6,
                        color = MaterialTheme.colors.secondary,
                    )

这在jetpack compose中可行吗？

Answer 1

所以在@CommonsWare 的评论和本文档的帮助下
https://developer.android.com/jetpack/compose/text#click-with-annotation
我设法使用 AnnotatedString 创建了相同的& ClickableText .注释是内联添加的，任何人都可以理解。

@Composable
    fun AnnotatedClickableText() {
        val annotatedText = buildAnnotatedString {
            //append your initial text
            withStyle(
                style = SpanStyle(
                    color = Color.Gray,
                )
            ) {
                append("Don't have an account? ")

            }

            //Start of the pushing annotation which you want to color and make them clickable later
            pushStringAnnotation(
                tag = "SignUp",// provide tag which will then be provided when you click the text
                annotation = "SignUp"
            )
            //add text with your different color/style
            withStyle(
                style = SpanStyle(
                    color = Color.Red,
                )
            ) {
                append("Sign Up")
            }
            // when pop is called it means the end of annotation with current tag
            pop()
        }

        ClickableText(
            text = annotatedText,
            onClick = { offset ->
                annotatedText.getStringAnnotations(
                    tag = "SignUp",// tag which you used in the buildAnnotatedString
                    start = offset,
                    end = offset
                )[0].let { annotation ->
                    //do your stuff when it gets clicked
                    Log.d("Clicked", annotation.item)
                }
            }
        )
    }