Jetpack：005-文本组件的扩展

news2024/11/19 10:40:34

文章目录

1. 概念介绍
2. 使用方法
- 2.1 可以选择的文本
- 2.2 可以点击的文本
- 2.3 多种形式的文本
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中文本组件的使用方法，本章回中主要介绍 文本组件的扩展。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的内容还围绕文本组件，我们主要介绍如何扩展文本组件，扩展主要分三个方面：可以选择的文本，可以点击的文本，多种形式的文本。下面是详细的的描述：

可以选择的文本：表示文本内容可以被选择，常用的操作是先选择然后复制文本；
可以点击的文本：表示文本内容可以响应点击事件，当点击文本后会对点击事件进行响应；
多种形式的文本：表示同一文本组件中包含不同的文本样式，类似多个文本拼接在一起；

2. 使用方法

2.1 可以选择的文本

对文本组件的这种扩展由SelectionContainer组合函数和Text组合函数共同完成，它的用法和正常的文本组件用法相同，只需要在文本组件外层嵌套一个SelectionContainer组件就可以，我们将在后面的小节中通过示例代码来演示具体的用法。

2.2 可以点击的文本

对文本组件的这种扩展由ClickableText组合函数实现，该函数包含两个重要的参数，详细如下：

text参数：用来存放文本组件中显示的内容；
onClick参数：它是方法类型，用来响应点击文本的事件；

2.3 多种形式的文本

对文本组件的这种扩展由AnnotationText类型的文本实现，把该类型的文本直接赋值给文本组件的text参数就可以。在创建该类型的文本时需要借助buildAnnotatedString函数，该函数和withStyle组合函数配合使用，可以创建多种不同风格的文本，我们将在后面的小节中通过示例代码来演示具体的用法。

3. 示例代码

//可以选择的文本，主要是嵌套了一个SelectionContainer函数
SelectionContainer() {
    Text(text = "click me and then selected")
}

//多种形式的文本
Text(text = buildAnnotatedString {
    withStyle( style = SpanStyle(color = Color.Red, fontSize = 12.sp)) {
        append("part1")
    }

    withStyle( style = SpanStyle(color = Color.Green, fontSize = 22.sp)) {
        append("part2")
    }

    withStyle( style = SpanStyle(color = Color.Blue)) {
        append("part3")
    }
})


//可以点击的文本
val annotationText = buildAnnotatedString {
    withStyle(style = SpanStyle(fontSize = 24.sp)) {
        append("url:")
    }

    withStyle(
        style = SpanStyle(color = Color.Red, textDecoration = TextDecoration.Underline)
    ) {
        pushStringAnnotation(
            tag = "URL",
            annotation = "www.baidu.com",
        )
        append("address")
        pop()
    }
}

ClickableText(text = annotationText,
    onClick = {
            offset -> annotationText.getStringAnnotations(
        tag = "URL",
        start = offset,
        end = offset
    ).toString()
        Log.d("tag","text is clicked : ${annotationText.toString()}")
    }
)