Jetpack Compose Text文本控件讲解

Text是用于显示文本的控件，它的底层实现是通过Cavans的drawText去实现。接下来我们来讲解下它的用法。

一：Text的构造源码

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = AmbientTextStyle.current
) {
    ...
}

• text是显示的文本
• modifier 修饰符，详细可以点击链接查看文章 Modifier详解
• color 是颜色
• fontSize 字体的大小
• fontStyle 字体的样式 （比如斜体）
• fontWeight 字体的样式 (比如粗体)
• fontFamily 处理字体 (比如设置宋体等)
• letterSpacing 每个字符之间的间距
• textDecoration 文本的装饰，比如TextDecoration.Underline 添加下划线，比如TextDecoration.LineThrough 中线划线
• textAlign 设置文字对齐 对齐方式
• lineHeight 设置行高
• overflow 当文字溢出的时候，比如...设置显示在最后
• softWrap 声明是否应在换行符处断开文本,默认是true
• maxLines 最大行数
• onTextLayout
• style 是TextStyle，文本样式的支持

二：显示文字

显示文字的最基本方法是使用以 String 作为参数的 Text 可组合项：

@Composable
fun SimpleText() {
  Text("Hello World")
}

1.2 显示资源中的文字

我们建议您使用字符串资源，而不是对 Text 值进行硬编码，因为使用字符串资源时您可以与 Android 视图共享相同的字符串，并为您的应用国际化做好准备

@Composable
fun StringResourceText() {
  Text(stringResource(R.string.hello_world))
}

三：设置文字样式

3.1 更改文字颜色

@Composable
fun BlueText() {
  Text("Hello World", color = Color.Blue)
}

3.2 更改字号

@Composable
fun BigText() {
  Text("Hello World", fontSize = 30.sp)
}

3.3 设置斜体

@Composable
fun ItalicText() {
  // 设置斜体
  Text("Hello World", fontStyle = FontStyle.Italic)
}

3.4 设置粗体

@Composable
fun ItalicText() {
  // 设置粗体
  Text("Hello World2", fontWeight = FontWeight.Bold)
}

3.5 文字对齐

@Preview(showBackground = true)
@Composable
fun CenterText() {
    Text("Hello World", textAlign = TextAlign.Center,
                modifier = Modifier.width(150.dp))
}

默认情况下，Text 会根据其内容值选择自然的文字对齐方式：

• 对于从左到右书写的文字，如拉丁语、西里尔文或朝鲜文，向 Text 容器的左边缘对齐
• 对于从右到左书写的文字，如阿拉伯语或希伯来语，向 Text 容器的右边缘对齐 如果您想手动设置 Text 可组合项的文字对齐方式，最好分别使用 TextAlign.Start 和 TextAlign.End（而不要使用 TextAlign.Left 和 TextAlign.Right），这样系统就可以根据具体语言的首选文字方向，将您的设置解析为向 Text 的右边缘对齐

3.6 处理字体

Text 有一个 fontFamily 参数，用于设置可组合项中使用的字体。默认情况下，系统会添加 Serif、Sans Serif、等宽和 Cursive 字体系列：

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}

当然你依然可以使用自己的字体文件，他依旧放在res-font下 然后你需要定义一个字体簇，这是Compose推荐的用法，因为这样可以包含不同的字重

val firaSansFamily = FontFamily(
        Font(R.font.firasans_light, FontWeight.Light),
        Font(R.font.firasans_regular, FontWeight.Normal),
        Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
        Font(R.font.firasans_medium, FontWeight.Medium),
        Font(R.font.firasans_bold, FontWeight.Bold)
)

最后，您可以将此 fontFamily 传递给 Text 可组合项。由于 fontFamily 可以包含不同的粗细度，因此您可以手动设置 fontWeight 来为您的文字选择合适的粗细度：

Column {
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Normal,
                    fontStyle = FontStyle.Italic)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(..., fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}

3.7 文本装饰

@Preview()
@Composable
fun textTest(){
    Column() {
        Text(text = stringResource(id = R.string.app_name),textDecoration = TextDecoration.LineThrough)
    }
}

3.8 行高

@Preview()
@Composable
fun textTest(){
    Column() {
        Text(text = stringResource(id = R.string.app_name),lineHeight = 15.sp)
    }
}

3.9 字符间距

@Preview()
@Composable
fun textTest(){
    Column() {
        Text(text = stringResource(id = R.string.app_name),letterSpacing = 3.sp)
    }
}

3.10 maxline是设置最大行数

@Composable
@Composable
fun LongText() {
    Text("hello ".repeat(50), maxLines = 2)
}

3.11 overflow设置文字溢出

在限制长文字时，您可能需要指定文字溢出，这些内容只有在显示的文字被截断时才会显示。如需指定文字溢出，请按如下方式设置 textOverflow 参数：

@Composable
fun OverflowedText() {
    // TextOverflow.Ellipsis是末尾...   TextOverflow.Clip是截取
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

3.12 TextStyle样式

我们来看一下， Text的最后一个参数style，实际上是TextStyle, TextStyle主要也是对text样式的支持，我们来看下TextStyle的源码

@Immutable
data class TextStyle(
    val color: Color = Color.Unspecified,
    val fontSize: TextUnit = TextUnit.Unspecified,
    val fontWeight: FontWeight? = null,
    val fontStyle: FontStyle? = null,
    val fontSynthesis: FontSynthesis? = null,
    val fontFamily: FontFamily? = null,
    val fontFeatureSettings: String? = null,
    val letterSpacing: TextUnit = TextUnit.Unspecified,
    val baselineShift: BaselineShift? = null,
    val textGeometricTransform: TextGeometricTransform? = null,
    val localeList: LocaleList? = null,
    val background: Color = Color.Unspecified,
    val textDecoration: TextDecoration? = null,
    val shadow: Shadow? = null,
    val textAlign: TextAlign? = null,
    val textDirection: TextDirection? = null,
    val lineHeight: TextUnit = TextUnit.Unspecified,
    val textIndent: TextIndent? = null
){
    ...
}

• color 一样是设置文字颜色
• fontSize 字体大小
• fontWeight 设置字体样式比如粗体等
• fontStyle 设置字体样式比如斜体
• fontFamily 设置字体。比如宋体
• letterSpacing 设置字符间距
• background 设置背景颜色
• textDecoration 设置装饰，比如下划线，中划线
• textAlign 设置对齐方式
• textDirection 设置文本方向，比如从左往右还是从右往左
• lineHeight 设置行高

// 由于前面这些属性我们都介绍过，所以同意简单写个样例
@Preview()
@Composable
fun textStyleTest(){
    Column {
        Text(text = stringResource(id = R.string.app_name),style = TextStyle(
                color = Color.Blue,fontSize = 13.sp,fontWeight=FontWeight.Bold
                ,fontStyle = FontStyle.Italic,fontFamily= FontFamily.Cursive
                ,letterSpacing= TextUnit.Companion.Em(1f),background = Color.Yellow
                ,textDecoration = TextDecoration.Underline,textAlign = TextAlign.Center,
                textDirection = TextDirection.ContentOrRtl,lineHeight = TextUnit.Companion.Em(13f)
        ))
    }
}

• shadow 设置阴影 (给文字设置阴影)

@Preview()
@Composable
fun textStyleTest(){
    Column {
        Text(text = stringResource(id = R.string.app_name),style = TextStyle(
               shadow = Shadow(
                    color = Color.Red,blurRadius = 3f,offset = Offset(3)
               )
        ))
    }
}

• fontSynthesis 字体的合成，主要有四种情况

enum class FontSynthesis {
    /**
     * 关闭字体合成。如果[FontFamily]中不存在粗体或倾斜的面，则不会合成它们
     */
    None,

    /**
     * 如果[FontFamily]中没有粗体字体，则只合成粗体字体。不会合成倾斜字体。
     */
    Weight,

    /**
     * 如果[FontFamily]中没有粗体字体，则只合成粗体字体。不会合成倾斜字体。
     */
    Style,

    /**
     * 如果[FontFamily]中没有粗体和倾斜字体，则系统会综合这两种字体
     */
    All;

    internal val isWeightOn: Boolean
        get() = this == All || this == Weight

    internal val isStyleOn: Boolean
        get() = this == All || this == Style
}

• textGeometricTransform 几何变换 两格参数scaleX是表示文本在水平方向上的缩放比例，skewX是表示文本在水平方向上的裁剪倾斜。

@Immutable
data class TextGeometricTransform(
    val scaleX: Float = 1.0f,
    val skewX: Float = 0f
) {
   ... 
}

举个例子

// 举个例子
@Preview()
@Composable
fun textStyleTest(){
    Column {
        Text(text = "你好 Android",style = TextStyle(
                textGeometricTransform = TextGeometricTransform(2f,2f)
        ))
    }
}

• fontFeatureSettings
• baselineShift 基准线的设置，我们文本都会有一个基准线，而这里可以设置三种值。BaselineShift.BaselineShift,BaselineShift.Subscript,BaselineShift.NONE

// 举个例子
@Preview()
@Composable
fun textStyleTest(){
    Column {
        Text(text = "你好 Android",style = TextStyle(
                baselineShift = BaselineShift.Subscript
        ))
    }
}

• localeList
• textIndent 指定段落的缩进。firstLine是第一行的缩进多少，restLine除第一行以外的每行的缩进量

data class TextIndent(
    val firstLine: TextUnit = 0.sp,
    val restLine: TextUnit = 0.sp
) {
   ...
}

@Preview()
@Composable
fun textStyleTest(){
    Column {
        Text(text = stringResource(id = R.string.app_name),style = TextStyle(
                textIndent = TextIndent(40.sp, 20.sp)
        ))
    }
}

3.13 文字中包含多种样式

当同一个文本里有存在多种样式，传统的设置不同的样式用Span，Compose里面使用 AnnotatedString，该字符串可使用任意注解样式加以注解。AnnotatedString 是一个数据类，其中包含：

• 一个 Text 值
• 一个 SpanStyleRange 的 List，等同于位置范围在文字值内的内嵌样式
• 一个 ParagraphStyleRange 的 List，用于指定文字对齐、文字方向、行高和文字缩进样式 TextStyle 用于 Text 可组合项，而 SpanStyle 和 ParagraphStyle 用于 AnnotatedString。

SpanStyle 和 ParagraphStyle 之间的区别在于，ParagraphStyle 可应用于整个段落，而 SpanStyle 可以在字符级别应用。一旦用 ParagraphStyle 标记了一部分文字，该部分就会与其余部分隔开，就像在开头和末尾有换行符一样

@Preview()
@Composable
fun textTest(){
    Column() {
        androidx.compose.material.Text(text = AnnotatedString(){
            withStyle(style = SpanStyle(color = Color.Blue)){
                append("H")
            }
            append("ello ")
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)){
                append("W")
            }
            append("orld")
        })
    }
}

我们可以按相同的方式设置段落样式：

@Preview()
@Composable
fun textTest2(){
    Column() {
        androidx.compose.material.Text(text = AnnotatedString(){
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,
                        color = Color.Red)) {
                    append("World\n")
                }
                append("Compose")
            }
        })
    }
}

三：用户互动

3.1 选择文字

默认情况下，可组合项不可选择，这意味着在默认情况下用户无法从您的应用中选择和复制文字。要启用文字选择，需要使用 SelectionContainer 可组合项封装文字元素：

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}

您可能想为可选择区域的特定部分停用选择功能。如果要执行此操作，您需要使用 DisableSelection 可组合项来封装不可选择的部分：

@Composable
fun PartiallySelectableText() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}

3.2 获取点击文字的位置

如需监听 Text 的点击次数，您可以添加 clickable 修饰符。不过，如果您想在 Text 可组合项内获取点击位置，在对文字的不同部分执行了不同操作的情况下，您需要改用 ClickableText。

@Composable
fun SimpleClickableText() {
    ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )
}

3.3 点击注解

当用户点击 Text 可组合项时，您可能想向 Text 值的某一部分附加额外信息，例如向特定字词附加可在浏览器中打开的网址。如果要执行此操作，您需要附加一个注解，用于获取一个标记 (String)、一个项 (String) 和一个文字范围作为参数。在 AnnotatedString 中，这些注解可以按照其标记或文字范围进行过滤。示例如下：

@Preview()
@Composable
fun textTest3(){
    val annotatedText = AnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(tag = "URL",
                annotation = "https://developer.android.com")
        withStyle(style = SpanStyle(color = Color.Blue,
                fontWeight = FontWeight.Bold)) {
            append("here")
        }

        pop()
    }

    ClickableText(
            text = annotatedText,
            onClick = { offset ->
                // We check if there is an *URL* annotation attached to the text
                // at the clicked position
                annotatedText.getStringAnnotations(tag = "URL", start = offset,
                        end = offset)
                        .firstOrNull()?.let { annotation ->
                            // If yes, we log its value
                            Log.d("Clicked URL", annotation.item)
                        }
            }
    )
}