Кликабельный SpannableText в Jetpack Compose

Ранее я опубликовал статью о том, как мы можем натянуть текст в компоновщике реактивного ранца. Глянь сюда

В compose, если вы хотите сделать текст кликабельным, вы можете использовать Modifer.clickable для текста или ClickableText .

Но мы будем использовать ClickableText, потому что он также дает смещение символа при нажатии.

например

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

Это будет полезно, когда вы хотите щелкнуть по тексту диапазона, мы можем легко найти интерактивную область диапазона.

Давайте создадим 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")
            })

Теперь мы обнаружим нашу область диапазона. Итак, что мы делаем внутри области withStyle, мы добавим новую строку pushStringAnnotation , она будет содержать аннотированную строку, и мы сможем найти ее позже.

Также я рефакторинг приведенного выше кода в такой последовательности для лучшего понимания.

1. Давайте добавим составные переменные.

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

Когда пользователь щелкает, мы можем легко найти аннотированную строку, используя смещение.

Полный фрагмент кода.

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

В этой статье я попытался объяснить, как мы можем добавить щелчок по области текста. Так как он статичен. Мы можем добиться того же в динамическом контенте, используя Regex.

Если вы не хотите писать каждый раз, вот gist - файл, который будет полезен в вашем проекте. Просто скопируйте и вставьте, и произойдет волшебство.

Спасибо, что прочитали эту статью.

Пожалуйста, похлопайте в ладоши и следуйте за мной, чтобы получать больше полезных статей.

Если вы хотите статью для динамического диапазона, давайте напишем в комментарии.

А теперь хлопаем!!!!!!!!