安卓开发： Compose 中的 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
)

字体大小、颜色、粗细、斜体样式

@Composable
fun TextTestView() {val content ="Hello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,fontSize = 20.sp, // 字体大小color = colorResource(id = R.color.purple_200), // 字体颜色fontWeight = FontWeight.Bold, // 字体加粗fontStyle = FontStyle.Italic // 字体斜体)}
}

单行 / 多行，超出显示 ...

在属性介绍中讲解了设置单行不允许换行 softWrap、设置最多显示几行 maxLines、内容超出截取显示 overflow，下面使用代码演示。

设置单行不允许换行，文字超出显示 ... 

@Composable
fun TextTestView() {val content ="文字对任何界面都属于核心内容，而利用 Jetpack Compose 可以更轻松地显示或写入文字。Compose 可以充分利用其构建块的组合，这意味着您无需覆盖各种属性和方法，也无需扩展大型类，即可拥有特定的可组合项设计以及按您期望的方式运行的逻辑。"Column(Modifier.fillMaxSize()) {Text(text = content, softWrap = false, overflow = TextOverflow.Ellipsis)}
}

设置多行，超出显示 ...

@Composable
fun TextTestView() {val content ="文字对任何界面都属于核心内容，而利用 Jetpack Compose 可以更轻松地显示或写入文字。Compose 可以充分利用其构建块的组合，这意味着您无需覆盖各种属性和方法，也无需扩展大型类，即可拥有特定的可组合项设计以及按您期望的方式运行的逻辑。"Column(Modifier.fillMaxSize()) {Text(text = content, maxLines = 3, overflow = TextOverflow.Ellipsis)}
}

字体 / 引用字体文件

Compose 内置了几种字体格式，使用 FontFamily. 设置。

@Composable
fun TextTestView() {val content = "Hello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,fontSize = 30.sp,fontFamily = FontFamily.Cursive)}
}

 Compose 只提供了四种字体格式是远远不够的，开发者可以引用其他的字体格式文件。 在 res 文件夹下创建 font 文件夹，将 .ttf 的字体格式文件放入该文件夹下，通过代码设置给 Text

@Composable
fun TextTestView() {val content = "Hello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,fontSize = 30.sp,fontFamily = FontFamily(Font(R.font.panda_font)))}
}

字间距 / 行间距

设置间距和行距使用的是 sp，因为可能机型系统不同，设置老年人模式或设置统一的字体大小，使用 sp 会根据设置改变。dp 是不会的，Compose 也是强制使用 sp 。

@Composable
fun TextTestView() {val content = "Hello Compose!\\nHello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,lineHeight = 30.sp,letterSpacing = 20.sp)}
}

中划线 / 下划线

@Composable
fun TextTestView() {val content = "Hello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,textDecoration = TextDecoration.Underline)Text(text = content,textDecoration = TextDecoration.LineThrough)}
}

文字对齐方向，下面以水平居中为列子：

@Composable
fun TextTestView() {val content = "Hello Compose!\\nHello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,modifier = Modifier.size(300.dp, 50.dp).background(Color.Gray),textAlign = TextAlign.Center)}
}

选择文本内容、复制等操作

Text 默认是不支持选择复制的，需要给它包一层 SelectionContainer{}函数，可以在任意层，比如 Text 父 View 的父 View ... 只要包着 Text 就有效。

@Composable
fun TextTestView() {SelectionContainer {Text("Hello Compose!")}
}

字体缩放比例，倾斜角度

Text 设置水平方向缩放比例，倾斜角度使用 textGeometricTransform 设置，其中有两个参数 scaleX 设置文字内容水平方向缩放比例，skewX 设置文字水平方向剪裁倾斜角度。

@Composable
fun TextTestView() {val content = "Hello Compose!"Column(Modifier.fillMaxSize()) {Text(text = content,style = TextStyle(textGeometricTransform = TextGeometricTransform(2f, -0.5f)))}
}

文本内容段落缩进

Text 设置段落缩进使用 textIndent，两个参数 firstLine 和 restLine 分别是设置第一行缩进量和其余行的缩进量。

@Composable
fun TextTestView() {val content = "文字对任何界面都属于核心内容，而利用 Jetpack Compose 可以更轻松地显示或写入文字。Compose 可以充分利用其构建块的组合，这意味着您无需覆盖各种属性和方法，也无需扩展大型类，即可拥有特定的可组合项设计以及按您期望的方式运行的逻辑。"\\n"Column(Modifier.fillMaxSize()) {Text(text = content,style = TextStyle(textIndent = TextIndent(20.sp, 10.sp)))}
}

文本内容多段不同样式
开发中经常会有这种需求，一串字符串中一部分显示不同颜色或加粗等样式的需求，Compose 提供了 buildAnnotatedString{} 文字构建器、withStyle() 设置该段文本的样式（在属性介绍中讲解了具体参数）、append() 文本链接。

下面以常见的隐私协议样式来展示，看代码更好理解。

在代码中可看出每个文本都在 withStyle 中，分别可以设置不同样式，灵活性高不仅可以设置样式，多段点击也是这样实现，下面 交互详解 中介绍。
 

点击监听

Text 点击监听使用 Modifier 设置

@Composable
fun TextTestView() {val content ="Hello Compose！"var clickNum by remember {mutableStateOf(0)}Text(text = content + clickNum,modifier = Modifier.clickable(onClick = {clickNum += 1}))
}

代码中使用了 Compose 的 remember 和 mutableStateOf 函数，mutableStateOf 是做数据绑定和变动通知的类似 Jetpack 的 liveData，后面写一篇文章详细介绍。

上面代码创建 int 类型变量 clickNum，填写 Text 中显示 UI，点击 Text clickNum + 1，Text 收到变量更新后自动刷新显示新的值，下面看实现效果。

文本多段点击监听
不同位置点击监听使用 ClickableText，它也是继承于 BasicText，只是比 Text 多了 onClick 参数，返回点击内容位置的下标。
 

@Composable
fun TextTestView() {var clickIndex by remember {mutableStateOf(0)}ClickableText(text = buildAnnotatedString {append("您好，请同意《掘金隐私协议》才可以登陆。")},) { contentIndex ->clickIndex = contentIndex}Text(text = "点击的文字下标：${clickIndex}",modifier = Modifier.padding(top = 20.dp))
}

这样就可以根据文字下标来判断点击范围。
下面使用 List 将需要点击的文字下标存下，点击时判断范围。

@Composable
fun TextTestView() {var clickIndex by remember {mutableStateOf("")}val clickIndexList: MutableList<Pair<Int, Int>> = ArrayList()ClickableText(text = buildAnnotatedString {append("您好，请同意")withStyle(style = SpanStyle(fontWeight = FontWeight.Bold,textDecoration = TextDecoration.Underline)) {val firstIndex = this.length + 1 // 下标开始append("《掘金隐私协议》")val endIndex = this.length // 下标结束clickIndexList.add(Pair(firstIndex, endIndex))}append("才可以登陆。")},) { contentIndex ->clickIndex = when (contentIndex) {in clickIndexList[0].first..clickIndexList[0].second -> {"点击了隐私协议"}else -> {"点击了其他范围"}}}Text(text = clickIndex,modifier = Modifier.padding(top = 20.dp))
}