对于用户界面而言，文本是最根底而又外围的内容，在传统的 Android Native 开发中，须要用一个TextView来显示一个文本。在Jetpack Compose 中，提供了Text可组合函数（即组件，前面的文章都会称其为“组件”），可更轻松的显示文本。在本文中，将带大家一起摸索Text组件的各种用法。
Text 属性介绍
在Jetpack Compose 中，组件是一个非凡的Kotlin 函数，因而Text其实也是一个函数，而它提供了很多参数来配置文本的显示外观。这些参数就是组件的属性。看一下Text组件有哪些属性：
@Composablefun 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，其余都有默认值，也就是应用的时候能够不传，然而如果传多个参数时，肯定要加参数名。比方，设置大小：
@Composablefun MyText(){ Text("Jetpack Compose，by 仍然范特稀西", fontSize = 20.sp )}第一个参数能够加参数名，也能够不加，但我集体还是举荐加上，因为他是一个组件，参数是它的属性，这样代码比拟直观。像上面这样就比拟好一点：
@Composablefun 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组件有哪些属性：
@Composablefun 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，其余都有默认值，也就是应用的时候能够不传，然而如果传多个参数时，肯定要加参数名。比方，设置大小：
@Composablefun MyText(){ Text("Jetpack Compose，by 仍然范特稀西", fontSize = 20.sp )}第一个参数能够加参数名，也能够不加，但我集体还是举荐加上，因为他是一个组件，参数是它的属性，这样代码比拟直观。像上面这样就比拟好一点：
@Composablefun MyText(){ Text( text = "Jetpack Compose，by 仍然范特稀西", fontSize = 20.sp )}晓得了，每个属性的意思，咱们接下来一起看看，配置各属性后的成果展现。
Text各属性示例成果
text 显示文本
显示文字的最简略的办法是应用以 String 作为参数的 Text 组件：
@Composablefun MyText(){ Text("Jetpack Compose，by 仍然范特稀西")}也能够显示字符串资源，这也是举荐的形式，而不是间接将字符串写死在代码中，这样有利于替换或者国际化。
<!-- xml资源文件--><resources> <string name="my_text">Jetpack Compose，by 仍然范特稀西</string></resources>@Composablefun MyText(){ Text(stringResource(R.string.my_text))}color 更改文字色彩
@Composablefun MyText() { Text( text = stringResource(R.string.my_text), color = Color.Blue )}fontSize 更改文字大小
@Composablefun MyText() { Text( text = stringResource(R.string.my_text), color = Color.Blue, fontSize = 30.sp, )}fontStyle 设置文字款式
fontStyle有2个取值，FontStyle.Italic和FontStyle.Normal
@Composablefun 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, W900 )看一下他们的显示成果：
@Composablefun 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。
@Composablefun 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更改文字间距，更确切的说是更改字符间距，因为如果是英文的话，不会按单词来设置间距，而是按字母。
@Composablefun MyText() { Text( text = stringResource(R.string.my_text), letterSpacing = 10.sp, )}textDecoration 文字装璜器
textDecoration能够给文字装璜下划线和中划线。默认提供了三个值：
None: 无装璜成果LineThrough: 增加中划线Underline: 增加下划线
@Composablefun 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函数，能够将下划线和中划线组合：
@Composablefun 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都将向右侧对齐。
@Composablefun 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
@Composablefun MyText() { Column { Text( text = "未设置lineHeight".repeat(10), ) Text( text = "曾经设置lineHeight".repeat(10), lineHeight = 30.sp ) }}overflow 设置文本溢出成果
overflow设置当文本超出控件时的显示款式，有两个取值：
TextOverflow.Clip: 超出局部间接截断TextOverflow.Ellipsis: 应用省略号示意文本已溢出
overflow个别配合maxLines应用
@Composablefun 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成果）。
@Composablefun 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应用：
@Composablefun MyText() { Text( text = stringResource(R.string.my_text).repeat(10), softWrap = false, overflow = TextOverflow.Ellipsis )}onTextLayout 计算新的布局时回调函数
计算新的Text布局时回调函数,回调中能够获取一些后果，比方控件的size等。
@Composablefun 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能够设置倒影成果，所有可配置属性如下：
@Composablefun 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的文章介绍。
@Composablefun 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组件显示的文本。
@Composablefun MyText() { SelectionContainer { Text(stringResource(R.string.my_text)) }}##### DisableSelection组件
JetpackCompose 其实反对更精细化的抉择，假如你想在一段可抉择的文本中，嵌入一个不可被抉择的文本。要实现这样一个性能非常简单，应用DisableSelection组件即可。
被 DisableSelection 包裹的Text组件，内容不可被抉择：
@Composablefun 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：
@Composablefun 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即可：
@Composablefun MyText() { ClickableText( text = AnnotatedString(stringResource(R.string.my_text)) ) { index -> Log.d("ClickableText", "第 $index 个字符被点击") }}留神ClickableText承受的是一个 AnnotatedString类型，最初一个参数就是onClick,这里使用了kotlin的lamuda表达式个性，最初一个lamuda表达式能够提到括号外，跟上面是等价的。
@Composablefun 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拼接字符串并设置款式：
@Composablefun 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外面的段落都会利用它设置的款式，看一下示例:
@Composablefun 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 获取携带的数据。
@Composablefun 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」，干货内容第一工夫送阅！