对于用户界面而言，文本是最基础而又核心的内容，在传统的 Android Native 开发中，需要用一个TextView来显示一个文本。在Jetpack Compose 中，提供了Text可组合函数（即组件，后面的文章都会称其为“组件”），可更轻松的显示文本。在本文中，将带大家一起探索Text组件的各种用法。

Text 属性介绍

在Jetpack Compose 中，组件是一个特殊的Kotlin 函数，因此Text其实也是一个函数，而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下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 = LocalTextStyle.current
Jetpack Compose 中，很多地方都用到了Kotlin 的特性，比如这里，就用到Kotlin的默认参数，Text 组件除了第一个参数text，其他都有默认值，也就是使用的时候可以不传，但是如果传多个参数时，一定要加参数名。比如，设置大小：
@Composable
fun MyText(){
    Text("Jetpack Compose，by 依然范特稀西", 
        fontSize = 20.sp
第一个参数可以加参数名，也可以不加，但我个人还是推荐加上，因为他是一个组件，参数是它的属性，这样代码比较直观。像下面这样就比较好一点：
@Composable
fun MyText(){
    Text(
        text = "Jetpack Compose，by 依然范特稀西",
        fontSize = 20.sp
知道了，每个属性的意思，我们接下来一起看看，配置各属性后的效果展示。
Text各属性示例效果
text 显示文本
Jetpack Compose系列-Text组件花式使用！
对于用户界面而言，文本是最基础而又核心的内容，在传统的 Android Native 开发中，需要用一个TextView来显示一个文本。在Jetpack Compose 中，提供了Text可组合函数（即组件，后面的文章都会称其为“组件”），可更轻松的显示文本。在本文中，将带大家一起探索Text组件的各种用法。
Text 属性介绍
在Jetpack Compose 中，组件是一个特殊的Kotlin 函数，因此Text其实也是一个函数，而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下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 = LocalTextStyle.current
Jetpack Compose 中，很多地方都用到了Kotlin 的特性，比如这里，就用到Kotlin的默认参数，Text 组件除了第一个参数text，其他都有默认值，也就是使用的时候可以不传，但是如果传多个参数时，一定要加参数名。比如，设置大小：
@Composable
fun MyText(){
    Text("Jetpack Compose，by 依然范特稀西", 
        fontSize = 20.sp
第一个参数可以加参数名，也可以不加，但我个人还是推荐加上，因为他是一个组件，参数是它的属性，这样代码比较直观。像下面这样就比较好一点：
@Composable
fun MyText(){
    Text(
        text = "Jetpack Compose，by 依然范特稀西",
        fontSize = 20.sp
知道了，每个属性的意思，我们接下来一起看看，配置各属性后的效果展示。
Text各属性示例效果
text 显示文本
显示文字的最简单的方法是使用以 String 作为参数的 Text 组件：
@Composable
fun MyText(){
    Text("Jetpack Compose，by 依然范特稀西")
也可以显示字符串资源，这也是推荐的方式，而不是直接将字符串写死在代码中，这样有利于替换或者国际化。
<!-- xml资源文件-->
<resources>
    <string name="my_text">Jetpack Compose，by 依然范特稀西</string>
</resources>
@Composable
fun MyText(){
    Text(stringResource(R.string.my_text))
color 更改文字颜色
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        color = Color.Blue
fontSize 更改文字大小
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        color = Color.Blue,
        fontSize = 30.sp,
fontStyle 设置文字样式
fontStyle有2个取值，FontStyle.Italic和FontStyle.Normal
@Composable
fun MyText() {
    Column{
        Text(
            text = stringResource(R.string.my_text),
            fontStyle = FontStyle.Normal,
        Text(
            text = stringResource(R.string.my_text),
            fontStyle = FontStyle.Italic,
fontWeight 更改文字的粗细程度
fontWeight 可以取 1- 1000之间的值，使用的时候，构造一个FontWeight即可:
FontWeight(50)
FontWeight 默认为我们定义几个默认值，100-900的整百值，并根据他们的显示效果取名为Bold,Light,Thin等等。
companion object {
        /** [Thin] */
        @Stable
        val W100 = FontWeight(100)
        /** [ExtraLight] */
        @Stable
        val W200 = FontWeight(200)
        /** [Light] */
        @Stable
        val W300 = FontWeight(300)
        /** [Normal] / regular / plain */
        @Stable
        val W400 = FontWeight(400)
        /** [Medium] */
        @Stable
        val W500 = FontWeight(500)
        /** [SemiBold] */
        @Stable
        val W600 = FontWeight(600)
        /** [Bold] */
        @Stable
        val W700 = FontWeight(700)
        /** [ExtraBold] */
        @Stable
        val W800 = FontWeight(800)
        /** [Black] */
        @Stable
        val W900 = FontWeight(900)
        /** Alias for [W100] */
        @Stable
        val Thin = W100
        /** Alias for [W200] */
        @Stable
        val ExtraLight = W200
        /** Alias for [W300] */
        @Stable
        val Light = W300
        /** The default font weight - alias for [W400] */
        @Stable
        val Normal = W400
        /** Alias for [W500] */
        @Stable
        val Medium = W500
        /** Alias for [W600] */
        @Stable
        val SemiBold = W600
         * A commonly used font weight that is heavier than normal - alias for [W700]
        @Stable
        val Bold = W700
        /** Alias for [W800] */
        @Stable
        val ExtraBold = W800
        /** Alias for [W900] */
        @Stable
        val Black = W900
        /** A list of all the font weights. */
        internal val values: List<FontWeight> = listOf(
            W100,
            W200,
            W300,
            W400,
            W500,
            W600,
            W700,
            W800,
看一下他们的显示效果：
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Thin,
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.ExtraLight
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Light
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Normal
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Medium
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.SemiBold
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Bold
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.ExtraBold
        Text(
            text = stringResource(R.string.my_text),
            fontWeight = FontWeight.Black
fontFamily 更改字体
fontFamily可以更改字体，FontFamily为我们默认内置了5种字体，Default、SansSerif、Serif、Monospace、Cursive。
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Default,
        Text(
            text = stringResource(R.string.my_text),
            fontFamily = FontFamily.SansSerif
        Text(
            text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Serif
        Text(
            text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Monospace
        Text(
            text = stringResource(R.string.my_text),
            fontFamily = FontFamily.Cursive
letterSpacing 更改文字间距
letterSpacing更改文字间距，更确切的说是更改字符间距，因为如果是英文的话，不会按单词来设置间距，而是按字母。
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        letterSpacing = 10.sp,
textDecoration 文字装饰器
textDecoration可以给文字装饰下划线和中划线。默认提供了三个值：
None: 无装饰效果
LineThrough: 添加中划线
Underline: 添加下划线
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.None,
        Text(
            text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.LineThrough,
        Text(
            text = stringResource(R.string.my_text),
            textDecoration = TextDecoration.Underline,
除此之外，TextDecoration还提供了一个combine函数，可以将下划线和中划线组合：
@Composable




    

fun MyText() {
    val combineDecoration = listOf(TextDecoration.Underline, TextDecoration.LineThrough)
    Text(
        text = stringResource(R.string.my_text),
        textDecoration = TextDecoration.combine(combineDecoration)
textAlign 设置文字对齐方向
 textAlign 可以设置Text组件内容的对齐方式，有TextAlign.Start、TextAlign. End 、TextAlign. Center 、TextAlign. Justify 等值。默认情况下，Text 会根据其内容值选择自然的文字对齐方式：
对于从左到右书写的文字，如拉丁语、西里尔文或朝鲜文，向 Text 容器的左边缘对齐
对于从右到左书写的文字，如阿拉伯语或希伯来语，向 Text 容器的右边缘对齐
如果您想手动设置 Text 组件的文字对齐方式，最好分别使用 TextAlign.Start 和 TextAlign.End（而不要使用 TextAlign.Left 和 TextAlign.Right），这样系统就可以根据具体语言的首选文字方向，将您的设置解析为向 Text 的右边缘对齐。例如，TextAlign.End 对于法语文字将向右侧对齐，而对于阿拉伯语文字则将向左侧对齐，但无论对于哪种文字，TextAlign.Right 都将向右侧对齐。
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Start
        Text(
            text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.End
        Text(
            text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Center
        Text(
            text = stringResource(R.string.my_text),
            modifier = Modifier
                .size(300.dp, 50.dp)
                .background(Color.Gray),
            textAlign = TextAlign.Justify
注意：要对齐方式生效，需要给Text设置大小，因为Text组件默认的大小是包裹内容的，上面的代码我们用 modifier属性设置了Text组件的大小。
lineHeight 设置行高
lineHeight设置行高，值为一个具体数值，单位为sp
@Composable
fun MyText() {
    Column {
        Text(
            text = "未设置lineHeight".repeat(10),
        Text(
            text = "已经设置lineHeight".repeat(10),
            lineHeight = 30.sp
overflow 设置文本溢出效果
overflow设置当文本超出控件时的显示样式，有两个取值：
TextOverflow.Clip: 超出部分直接截断
TextOverflow.Ellipsis: 使用省略号表示文本已溢出
overflow一般配合maxLines使用
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text).repeat(10),
            overflow = TextOverflow.Clip,
            maxLines = 2
        Spacer(modifier = Modifier.height(20.dp))
        Text(
            text = stringResource(R.string.my_text).repeat(10),
            overflow = TextOverflow.Ellipsis,
            maxLines = 2
maxLines 设置最多显示行数
maxLines配置最多显示几行，该属性一般需要配置overflow，表明超出部分该如何显示，默认直接截断（Clip效果）。
@Composable
fun MyText() {
    Column {
        Text(
            text = stringResource(R.string.my_text).repeat(10),
        Spacer(modifier = Modifier.height(20.dp))
        Text(
            text = stringResource(R.string.my_text).repeat(10),
            maxLines = 2,
softWrap 是否自动换行
默认为true，即会自动换行，如果设置为false，将不会自动换行。一般使用场景为：文本单行显示，超出默认截断或显示省略号，即配合overflow使用：
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text).repeat(10),
        softWrap = false,
        overflow = TextOverflow.Ellipsis
onTextLayout 计算新的布局时回调函数
计算新的Text布局时回调函数,回调中可以获取一些结果，比如控件的size等。
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        onTextLayout = {
            Log.e("xige","text width: ${it.size.width}, text height: ${it.size.height}")
运行结果：
style 可以配置text 的颜色、字号、行高等等
颜色、字号、行高等那些属性效果，都可以用style来统一配置,除此之外，还有一些属性，如：shadow可以设置倒影效果，所有可配置属性如下：
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        style = TextStyle(
            color = Color.Blue,
            fontSize = 20.sp,
            lineHeight = 20.sp,
            fontWeight = FontWeight.Bold,
            fontFamily = FontFamily.Monospace,
            fontStyle = FontStyle.Normal,
            shadow = Shadow(
                color = Color.Red,
                offset = Offset(10.0f,10.0f),
                blurRadius = 10.0f
modifier 修改器
最后来说说modifier,这个属性很重要，也不是Text组件所独有，基本所有组件都有这个属性，它可以修改组件外观比如：pading、宽高、背景、形状等等。但绝不仅于此，还要很多强大的功能，可以定义动画，自定义点击事件等等。由于篇幅有限，后面会单独写一篇Modifier的文章介绍。
@Composable
fun MyText() {
    Text(
        text = stringResource(R.string.my_text),
        modifier = Modifier
            .border(
                width = 3.dp,
                color = Color.Red,
                shape = RoundedCornerShape(
                    topStart = 30.dp,
                    topEnd = 30.dp,
                    bottomStart = 20.dp,
                    bottomEnd = 30.dp
            .size(400.dp, 50.dp)
            .padding(10.dp)
可选择的Text
默认情况下，Text组件内容不可选择，这意味着，在默认情况下用户无法从你的应用中选择和复制文字。要启用文字选择，需要使用 SelectionContainer 容器包装Text元素。
SelectionContainer 组件
从字面意思看：可选择的容器，确实，只要用SelectionContainer包装Text，则可选择Text组件显示的文本。
@Composable
fun MyText() {
   SelectionContainer {
       Text(stringResource(R.string.my_text))
DisableSelection组件
JetpackCompose 其实支持更精细化的选择，假设你想在一段可选择的文本中，嵌入一个不可被选择的文本。要实现这样一个功能非常简单，使用DisableSelection组件即可。
被 DisableSelection 包裹的Text组件，内容不可被选择：
@Composable
fun MyText() {
    SelectionContainer {
        Column {
            Text("我是可被选中文本1")
            Text("我是可被选中文本2")
            Text("我是可被选中文本3")
            DisableSelection {
                Text("我是不可被选中文本1")
                Text("我是不可被选中文本2")
            Text("我是可被选中文本4")
            Text("我是可被选中文本4")
可点击的Text
添加clickable 修饰符
Text 组件本身是没有点击事件的，如果要让Text可点击，可以给它添加clickable 修饰符，也就是我们前面说的Modifier，如下，我们添加一个可点击Text，点击一次增加1：
@Composable
fun MyText() {
    val txt = remember { mutableStateOf(0)}
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFE5E4E2))
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
        Text(
            text = "${txt.value}",
            fontFamily = FontFamily.Serif,
            fontSize = 75.sp,
            color = Color(0xFFE63E62),
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(Color(0xFFC9C0BB))
                .clickable(
                    enabled = true,
                    role = Role.Button
                    txt.value += 1
                .padding(25.dp)
获取点击文字的位置
clickable可以给Text添加点击事件，但是它却不能监听点击的是Text的那个位置，比如显示的是Jetpack Compose，by 依然范特稀西,我想确定点击的是哪个字符，该咋整呢？Compose 为我们提供了支持，使用ClickableText即可：
@Composable
fun MyText() {
    ClickableText(
        text = AnnotatedString(stringResource(R.string.my_text))
    ) { index ->
        Log.d("ClickableText", "第 $index 个字符被点击")
注意ClickableText接受的是一个 AnnotatedString类型，最后一个参数就是onClick,这里运用了kotlin的lamuda表达式特性，最后一个lamuda表达式可以提到括号外，跟下面是等价的。
@Composable
fun MyText() {
    ClickableText(
        text = AnnotatedString(stringResource(R.string.my_text)),
        onClick = { index ->
            Log.d("ClickableText", "第 $index 个字符被点击")
Text样式嵌套
Text 支持为其中的字符、字符串单独设置不同的样式，因为Text组件的text属性是AnnotatedString类型，AnnotatedString是一个数据类：
class AnnotatedString internal constructor(
    val text: String, // 字符串
    val spanStyles: List<Range<SpanStyle>> = emptyList(), // 设置字符样式的List
    val paragraphStyles: List<Range<ParagraphStyle>> = emptyList(), //设置段落样式的List
    internal val annotations: List<Range<out Any>> = emptyList() // 注解list
我们可以通过提供的buildAnnotatedString来构建AnnotatedString 类，其中，可以通过append函数拼接字符串，可以通过withStyle拼接字符串并设置样式：
@Composable
fun MyText() {
    Text(
        buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    color = Color.Blue,
                    fontWeight = FontWeight.Bold
                append("Jetpack ")
            append("Compose ")
            withStyle(
                style = SpanStyle(
                    color = Color.Red,
                    fontWeight = FontWeight.Bold,
                    fontSize = 30.sp
                append("by ")
            append("依然范特稀西")
这里我们使用了SpanStyle 来设置单个样式，还有一个ParagraphStyle ，按字面理解，就是设置段落样式，也就是包裹在ParagraphStyle里面的段落都会应用它设置的样式，看一下示例:
@Composable
fun MyText() {
    Text(
        buildAnnotatedString {
            withStyle(
                // 设置段落样式
                style = ParagraphStyle(
                    lineHeight = 60.sp,
                    textAlign = TextAlign.Center
                withStyle(
                    style = SpanStyle(
                        color = Color.Blue,
                        fontWeight = FontWeight.Bold
                    append("Jetpack Compose\n")
                withStyle(
                    style = SpanStyle(
                        color = Color.Red,
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp
                    append("by\n")
                withStyle(
                    style = SpanStyle(
                        color = Color.Green,
                        fontWeight = FontWeight.Bold,
                    append("依然范特稀西\n")
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp,
                        color = Color.Red
                    append("@公众号：技术最TOP
        modifier = Modifier.width(400.dp)
上面，设置的lineHeight和textAlin样式应用到了所包裹的所有段落上。
实用案列-点击超链接
我们的APP中，登录/注册页面都会有隐私政策协议，需要用户同意后才能继续，像下面这样：
点击蓝色字即可跳转到隐私政策/用户协议界面，一般是一个H5页面。我们来用Jetpack Compose实现这么一个功能。
思路： ClickText + 样式嵌套 + 点击注解  可实现
前两个已经介绍过了，现在简单说说点击注解：在使用buildAnnotatedString 时，可以使用pushStringAnnotation 携带一个tag数据, 在点击对应tag时， onClick 中，可以使用getStringAnnotations 获取携带的数据。
@Composable
fun MyText() {
    val annotatedText = buildAnnotatedString {
        append("登录即表明同意")
        pushStringAnnotation(
            tag = "tag1",
            annotation = "隐私条款1：https://www.xxx1.com"
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            append("中国移动认证服务条款")
        pop()
        append("以及")
        pushStringAnnotation(
            tag = "tag2",
            annotation = "隐私条款2：https://www.xxx2.com"
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            append("用户协议")
        pop()
        append("和")
        pushStringAnnotation(
            tag = "tag1",
            annotation = "隐私条款3：https://www.xxx3.com"
        withStyle(
            style = SpanStyle(
                color = Color.Blue,
                fontWeight = FontWeight.Bold,
                textDecoration = TextDecoration.Underline
            append("隐私政策")
        pop()
    val tags = listOf("tag1", "tag2", "tag3")
    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            tags.forEach { tag ->
                annotatedText.getStringAnnotations(
                    tag = tag, start = offset,
                    end = offset
                    .firstOrNull()?.let { annotation ->
                        Log.d("xige", annotation.item)
点击蓝色字，打印如下：

在真实场景中，只需要将打印的地方，换跳转Webview展示即可。
以上就是Jetpack Compose中，Text组件使用的介绍，以及文字显示的各种使用探索。欢迎大家留言交流。
我是西哥，欢迎大家关注我的公众号：「技术最TOP」，干货内容第一时间送阅！