Text是最常见的组件之一,用于显示文本。了解他的用法之前,先看看它的基本参数说明。
一、基本参数
kotlin
text: String, //文本内容
//text: AnnotatedString, //多样式文字
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, //控制文本是否能够换行,如果为false,则会截断
maxLines: Int = Int.MAX_VALUE, //最大行数
onTextLayout: (TextLayoutResult) -> Unit = {}, //在文本发生变化之后,回调此方法
style: TextStyle = LocalTextStyle.current //文本的风格配置,如颜色、字体、行高等
二、用法
1、简单用法
ini
Text(text = "Hello Compose")
2、引用string.xml文件资源
vbnet
Text(text = stringResource(id = R.string.app_name))
3、字体样式
ini
Text(
text = "Hello Compose",
style = TextStyle(//文本的风格配置
fontFamily = FontFamily.Default,////文本的字体
fontSize = 15.sp,//字体大小
fontWeight = FontWeight.Bold,//文本的粗细
fontStyle = FontStyle.Italic,//斜体
color = Color.Red,//文本颜色
textDecoration = TextDecoration.LineThrough//删除线
)
)
注:颜色引用colors.xml文件资源
ini
colorResource(id = R.color.red)
删除线和下划线同时存在
ini
textDecoration = TextDecoration.combine(
listOf(
TextDecoration.LineThrough,
TextDecoration.Underline
)
)
4、文本对齐方式
ini
Text(
text = "Hello Compose",
textAlign = TextAlign.Left,
color= Color.White,
modifier = Modifier.fillMaxWidth().background(Color.Red).height(200.dp)
)
注:Left左对齐、Right右对齐、Center居中对齐、Start从左往右的语言从左对齐,从右往左的语言从右对齐、End从左往右的语言从右对齐,从右往左的语言从左对齐。
如果宽度没有充满或者说文本的宽度等于自身是看不见效果的。
5、行数上限和文字溢出
ini
Text(
text = "Hello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello ComposeHello Compose",
maxLines = 1,//最大行数
overflow = TextOverflow.Ellipsis
)
注:maxLines指定文本的最大行数,overflow指定文本溢出时的处理方式:Ellipsis使用省略号表示文本已溢出,Visible显示所有文本,即使指定边界内没有足够的空间,Clip剪裁溢出的文本。
6、富文本
scss
Text(
text = buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Black)) {
append("文字变色加粗")
}
withStyle(style = SpanStyle(color = Color.Blue,fontWeight = FontWeight.W900)) {
append("Hello Compose")
}
append("\n")
withStyle(style = SpanStyle(color = Color.Black)) {
append("文字变色加粗添加下划线")
}
withStyle(style = SpanStyle(color = Color.Blue,fontWeight = FontWeight.W900, textDecoration = TextDecoration.Underline)) {
append("Hello Compose")
}
}
)
7、添加点击事件
Text没有点击事件的监听,需要换成ClickableText。
ini
val annotatedText = buildAnnotatedString {
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)
}
}
)
withStyle函数用于指定文本的样式,append函数用于添加文本。pop函数将该样式或注释从上下文中移除,使其不再影响后续文本的样式,也就是恢复默认样式。
8、选中文本
需要搭配SelectionContainer使用。
ini
SelectionContainer() {
Text(
text = "Hello Compose",
color = Color.Red,
fontSize = 15.sp,
overflow = TextOverflow.Ellipsis,
style = TextStyle(color = Color.Blue)
)
}
参考: developer.android.google.cn/jetpack/com... blog.csdn.net/weixin_4278... juejin.cn/post/727625...