SpannableText cliquable dans Jetpack Compose

Auparavant, j'ai posté un article sur la façon dont nous pouvons étendre un texte dans jetpack compose . Vois ici

En composition si vous souhaitez rendre un texte cliquable soit vous pouvez utiliser Modifer.clickable sur un Text ou ClickableText .

Mais nous utiliserons ClickableText car il donne également le décalage du caractère lorsque vous cliquez.

par exemple

ClickableText("Hello", onClick = { offset ->
    println("You clicked on offset $offset")
})

Cela vous sera utile lorsque vous voudrez cliquer sur le texte de l'étendue, nous pouvons facilement trouver une zone d'étendue cliquable.

Créons un AnnotatedString (Span text)

ClickableText(text = buildAnnotatedString {
                append("I have read ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Terms and Condition")
                }
                append(" and ")
                withStyle(style = SpanStyle(color = Color.Red), ) {
                    append("Privacy policy")
                }
            }, onClick = {
                println("Clicked offset $it")
            })

Maintenant, nous allons détecter notre zone d'étendue. Donc, ce que nous faisons à l'intérieur de la portée withStyle, nous allons ajouter une nouvelle ligne pushStringAnnotation , elle contiendra la chaîne annotée et nous pourrons la retrouver plus tard.

De plus, je refactorise le code ci-dessus de manière séquentielle pour une meilleure compréhension.

1. Ajoutons des variables extensibles.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"

val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}

ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

Lorsque l'utilisateur clique, nous pouvons facilement trouver la chaîne annotée en utilisant offset.

Extrait de code complet.

val tnc = "Terms and Condition"
val privacyPolicy = "Privacy policy"
val annotatedString = buildAnnotatedString {
    append("I have read ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = tnc, annotation = tnc)
        append(tnc)
    }
    append(" and ")
    withStyle(style = SpanStyle(color = Color.Red), ) {
        pushStringAnnotation(tag = privacyPolicy, annotation = privacyPolicy)
        append(privacyPolicy)
    }
}
ClickableText(text = annotatedString, onClick = { offset ->
    annotatedString.getStringAnnotations(offset, offset)
        .firstOrNull()?.let { span ->
            println("Clicked on ${span.item}")
        }
})

Dans cet article, j'ai essayé d'expliquer comment nous pouvons ajouter un clic sur une zone de texte étendue. Puisqu'il est statique. Nous pouvons obtenir la même chose dans le contenu dynamique en utilisant Regex.

Si vous ne voulez pas écrire à chaque fois, voici le fichier gist qui vous sera utile dans votre projet. Il suffit de copier-coller et la magie se produira.

Merci d'avoir lu cet article.

S'il vous plaît, donnez quelques applaudissements et suivez-moi pour des articles plus utiles.

Si vous voulez un article pour une durée dynamique, écrivez en commentaire.

Maintenant APPLAUDISSEMENT!!!!!!!!