SpannableText clicável no Jetpack Compose

Anteriormente, postei um artigo sobre como podemos expandir um texto no jetpack compose . Veja aqui

Ao compor, se você deseja tornar um texto clicável, pode usar Modifer.clickable em um texto ou ClickableText .

Mas usaremos ClickableText porque também fornece o deslocamento do caractere quando você clica.

por exemplo

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

Isso será útil quando você quiser clicar no texto de extensão, podemos encontrar facilmente a área de extensão clicável.

Vamos criar um AnnotatedString (texto Span)

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")
            })

Agora vamos detectar nossa área de extensão. Então, o que fazemos dentro do escopo withStyle, adicionaremos uma nova linha pushStringAnnotation , que conterá a string anotada e podemos encontrá-la mais tarde.

Também estou refatorando o código acima de forma sequencial para melhor entendimento.

1. Vamos adicionar variáveis ​​expansíveis.

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}")
        }
})

Quando o usuário clica, podemos encontrar facilmente a String anotada usando offset.

Trecho de código completo.

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}")
        }
})

Neste artigo, tentei explicar como podemos adicionar um clique na área de extensão do texto. Já que é estático. Podemos conseguir a mesma coisa em conteúdo dinâmico usando Regex.

Se você não quiser escrever toda vez, aqui está o arquivo gist , que será útil em seu projeto. Basta copiar e colar e a mágica acontecerá.

Obrigado por ler este artigo.

Por favor, dê algumas palmas e siga-me para mais artigos úteis.

Se você quiser um artigo para span dinâmico, escreva um comentário.

Agora palmas!!!!!!!!