Android compose学习之路（一） Text组件

1.基本用法

使用 Text 组件最简单的方式是将要显示的文本传递给 text 属性：

Text(text = "Hello, Compose!")

使用string.xml文件的写法

 text = stringResource(id = R.string.hello_word)

2.字体样式

使用 Text 组件时，可以通过 style 属性指定文本的字体样式。可以创建 TextStyle 对象并将其传递给 style 属性：

Text(
    text = "Hello, Compose!",
    style = TextStyle(
        fontFamily = FontFamily.SansSerif,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Italic,
        color = Color.Black
    )
)

也可以通过直接写入需要的样式

  color = colorResource(id = R.color.teal_200),
  fontSize = 16f.sp,
  	

装饰线的写法

textDecoration = TextDecoration.LineThrough,    //这是删除线

也可以合并装饰线的写法

textDecoration = TextDecoration.combine(
    listOf(
        TextDecoration.LineThrough,
        TextDecoration.Underline
    )
),  /删除线和下划线同时存在

3.文本对齐

可以使用 textAlign 属性指定文本在组件内的对齐方式。以下是一些常用的选项：

Left：左对齐
Right：右对齐
Center：居中对齐
Start：从左往右的语言从左对齐，从右往左的语言从右对齐
End：从左往右的语言从右对齐，从右往左的语言从左对齐

Text(
    text = "Hello, Compose!",
    textAlign = TextAlign.Center
)

4.字数限制

可以使用 maxLines 属性来指定文本在组件内的最大行数，使用 overflow 属性来指定文本溢出时的处理方式：
TextOverflow.Ellipsis：使用省略号表示文本已溢出。
TextOverflow.Visible:显示所有文本，即使指定边界内没有足够的空间。
TextOverflow.Clip:剪裁溢出的文本。

Text(
    text = "测试一个文本，一个长文本，用于测试compose的text组件。",
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

5.富文本

可以使用 AnnotatedString 来创建富文本，用于更精细地控制文本的样式和显示方式可以使用（例如提示用户同意*《隐私协议》和《用户协议》*用于对指定的字符进行标蓝处理）

Text(
	    text = AnnotatedString(
	        text = "这是一段富文本，其中 Hello 用蓝色显示，Compose 用红色显示。",
	        spanStyles = listOf(
	            AnnotatedString.Range(
	                start = 5,
	                end = 10,
	                span = SpanStyle(
	                    color = Color.Blue,
	                    fontSize = 18.sp,
	                    fontWeight = FontWeight.Bold
	                )
	            ),
	            AnnotatedString.Range(
	                start = 11,
	                end = 18,
	                span = SpanStyle(
	                    color = Color.Red,
	                    fontSize = 18.sp,
	                    fontStyle = FontStyle.Italic
	                )
	            )
	        )
	    )
)

6.点击事件

onClick 默认参数it为你点击的第几个文本

    ClickableText(text =annotatedString , onClick = {
       Log.d("=====","点击了文本index"+it)
    })

(1)详解buildAnnotatedString

	AnnotatedString 对象可以包含原始的字符串文本，以及一些称为 Span 的对象。Span 是一个用于描述文本区域的样式的基本单位，可以定义文本的颜色、字体、大小、下划线、链接等等。

	val annotatedString = buildAnnotatedString {
    withStyle(style = TextStyle(color = Color.Blue)) {
        append("Hello")
    }
    pop()
    append(", ")
    withStyle(style = TextStyle(color = Color.Red)) {
        append("world")
    }
}

这个代码片段中，buildAnnotatedString 函数创建了一个 AnnotatedString 对象。其中，withStyle 函数用于指定文本的样式，append 函数用于添加文本。

在这个例子中，Hello 一词的颜色被设置为蓝色，而 world 一词的颜色被设置为红色。最终，这个富文本被赋值给 annotatedString 变量。

除了 withStyle 和 append 函数，buildAnnotatedString 函数还提供了其他一些函数，例如 pushStyle, pop, pushStringAnnotation 等等。这些函数可以用来指定更为复杂的文本样式和行为。

(2) pop()函数

在 Compose 中，pop 函数通常与 push 函数一起使用，用于在一组样式或注释上下文中恢复先前的状态。push 函数将一个样式或注释添加到当前上下文中，而 pop 函数将该样式或注释从上下文中移除，使其不再影响后续文本的样式。

在使用 buildAnnotatedString 函数创建富文本时，可以使用 pushStyle 和 pop 函数来定义一个局部的文本样式，如下所示：

val annotatedString = buildAnnotatedString {
    withStyle(style = TextStyle(color = Color.Blue)) {
        append("Hello")
        pop() // 恢复默认样式
    }
    append(", world!")
}

在这个例子中，withStyle 函数将 Hello 一词的颜色设置为蓝色，然后 pop 函数将默认样式恢复。这样，Hello 一词的样式仅在 withStyle 和 pop 函数之间有效，而不会影响其他文本的样式。

需要注意的是，push 和 pop 函数不仅可以用于样式，也可以用于注释。例如，以下代码使用 pushStringAnnotation 和 pop 函数向文本添加了一个注释：

val annotatedString = buildAnnotatedString {
    pushStringAnnotation(tag = "link", annotation = "https://www.example.com") {
        append("Click here!")
    }
    pop() // 恢复默认状态
}

在这个例子中，pushStringAnnotation 函数向文本添加了一个注释，并将其标记为 “link”。在此注释内，Click here! 一词将具有一个与之关联的注释。而 pop 函数则将默认状态恢复，使得该注释不会影响其他文本的样式。

7选中文本

可以加上SelectionContainer组件后文本可以被长按选中效果

 SelectionContainer() {
        Text(
             text = stringResource(id = R.string.hello_word)
            color = colorResource(id = R.color.teal_200),
            fontSize = 16f.sp,
            overflow = TextOverflow.Ellipsis,
            style = TextStyle(color = colorResource(id = R.color.teal_200))
        )
    }

8.行高和间距

可以使用 lineHeight 属性指定每行文本的高度，使用 lineSpacing 属性指定行间距：

Text(
    text = "这是一段文本。",
    lineHeight = 24.sp,
    lineSpacing = 8.dp
)