Частично раскрасьте текст и сделайте его интерактивным в Jetpack Compose [дубликат]

Question

Для представлений, объявленных в XML, мы могли бы использовать SpannableStringBuilderкак упоминалось здесь, /questions/17702983/android-raskraska-chasti-stroki-s-ispolzovaniem-textviewsettext/17702984#17702984 чтобы раскрасить эту частичную строку.

Но с JetPack compose я не могу добиться того же, используя только один 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)
                }
            }
        )
    }