SpannableText có thể nhấp trong Jetpack Compose

Trước đây tôi đã đăng một bài viết làm thế nào chúng ta có thể kéo dài một văn bản trong soạn thảo jetpack. Xem tại đây

Trong phần soạn thảo, nếu bạn muốn làm cho văn bản có thể nhấp được, bạn có thể sử dụng Modifer.clickable trên Văn bản hoặc ClickableText .

Nhưng chúng tôi sẽ sử dụng ClickableText vì nó cũng cung cấp độ lệch của ký tự khi bạn nhấp.

ví dụ

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

Điều này sẽ hữu ích khi bạn muốn nhấp vào văn bản span, chúng tôi có thể dễ dàng tìm thấy khu vực span có thể nhấp.

Hãy tạo một AnnotatedString (Văn bản kéo dài)

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

Bây giờ chúng tôi sẽ phát hiện khu vực span của chúng tôi, Vì vậy, những gì chúng tôi làm bên trong phạm vi withStyle, chúng tôi sẽ thêm dòng mới PushStringAnnotation , nó sẽ giữ chuỗi chú thích và chúng tôi có thể tìm thấy nó sau.

Ngoài ra, tôi đang cấu trúc lại đoạn mã trên theo trình tự như vậy để hiểu rõ hơn.

1. Hãy thêm các biến có thể mở rộng.

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

Khi người dùng nhấp vào, chúng tôi có thể dễ dàng tìm thấy Chuỗi chú thích bằng cách sử dụng phần bù.

Đoạn mã đầy đủ.

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

Trong bài viết này, tôi đã cố gắng giải thích cách chúng ta có thể thêm nhấp chuột vào vùng span của văn bản. Vì nó là tĩnh. Chúng ta có thể đạt được điều tương tự trong nội dung động bằng cách sử dụng Regex.

Nếu bạn không muốn viết mọi lúc thì đây là tệp Gist sẽ hữu ích trong dự án của bạn. Chỉ cần sao chép và dán và điều kỳ diệu sẽ xảy ra.

Cảm ơn bạn đã đọc bài viết này.

Hãy vỗ tay và theo dõi tôi để có nhiều bài viết hữu ích hơn.

Nếu bạn muốn một bài viết cho khoảng động, hãy viết bình luận.

Bây giờ Vỗ tay!!!!!!!!