Android的Compose系列之文本TextView

前言

本文用来介绍有关TextView文本的Compose中使用形式，主要介绍各种场景下的使用方式与本身的属性设置等，同时该文章也会长期更新，添加或更换新的api,以及我发现的新的使用方式，请各位务必收藏，可以随时翻阅。

官方中文文档的地址(需要科学上网)：https://developer.android.com/develop/ui/compose/documentation?hl=zh-cn
学习Compose的网站参考(部分内容可能过时)：https://jetpackcompose.cn/docs/

一、Text介绍

Text是Compose中用来显示文本内容的UI,等同于TextView，相关属性也很雷同，但是点击事件等设置有所不同，以及使用方式也有所变化。

二、使用

1.常用使用方式

@ComposablefunTextComposeSample(){//5种不同的用法/** * 直接赋予内容 */Text("这是预览界面的内容!")/** * 结合资源使用，推荐 */Text(stringResource(R.string.contents))}

2.相关参数设置

Text的属性详解：

Text(text="文本具体内容",color=Color.Red,//颜色fontSize=20.sp,//字号fontStyle=FontStyle.Italic,//样式，可选Normal普通或Italic斜体fontWeight=FontWeight.W100,//粗细fontFamily=FontFamily.Serif,//字体letterSpacing=12.sp,//文字的间距// textDecoration = TextDecoration.None, //装饰 Underline下划线 LineThrough删除线 None无textDecoration=TextDecoration.combine(//多种装饰合并listOf(//下划线+删除线TextDecoration.Underline,TextDecoration.LineThrough)),textAlign=TextAlign.Center,//相对于父容器的文本对齐方式，设置Modifier.fillMaxWidth()或者父容器不是自适应才能看到效果lineHeight=30.sp,//行高maxLines=2,//显示行数极值，超过部分会被截断overflow=TextOverflow.Ellipsis,//超出部分显示省略号，Clip直接截断显示 Visible强制完整显示softWrap=true,//是否自动换行，默认true,false时会单行显示并可能溢出modifier=Modifier//修饰符，用于控制尺寸、边距、对齐等布局行为.padding(10.dp)//内边距.background(Color.Yellow)//背景.width(120.dp)//宽度.height(120.dp),//长度)

Text中设置style的属性详解：

//样式的设置， 可在data类中定义val BodyNormal = TextStyle()可将不同样式赋值给全项目特定控件来实现复用并统一风格Text(text="文本具体内容",style=TextStyle(//设置样式可以设置统一的风格color=Color.Blue,//颜色fontSize=20.sp,//字号fontWeight=FontWeight.Bold,//粗体fontStyle=FontStyle.Italic,//字体textDecoration=TextDecoration.Underline,// 下划线fontFamily=FontFamily.Serif,// 字体家族letterSpacing=2.sp,// 字间距lineHeight=30.sp// 行高))

3.不同需求的功能实现

多语言下的设置与占位符使用

/** * 用于多语言切换与占位符使用 * 注：需在strings.xml 中设置资源 * <string name="contents_language">这是多语种适配与占位符设置，姓名：%1$s，年龄：%2$d</string> */Text(text=stringResource(id=R.string.contents_language,"张三",//替换 %1$s6//替换 %2$d))

通过风格统一管理不同的Text显示

通常有两种方式，一种是使用自带的MaterialThem中的Medium、Small、Large三种不同的预设对其设置为统一的诸如标题、正文等格式，一种是通过自定义的方式进行统一设置。

官方Text的文档：https://developer.android.com/develop/ui/compose/text/user-interactions?hl=zh-cn

//默认的统一风格Text(text="自带的标题的样式",style=MaterialTheme.typography.headlineMedium)Text(text="自带的正文的样式",style=MaterialTheme.typography.bodyMedium)

//使用自定义风格管理// 1. 主题样式定义（ui/theme/TextStyles.kt）dataclassAppTextStyles(valtitle:TextStyle,valcontent:TextStyle,valhint:TextStyle)valLightTextStyles=AppTextStyles(title=TextStyle(fontSize=18.sp,fontWeight=FontWeight.SemiBold,color=Color.Black,lineHeight=26.sp),content=TextStyle(fontSize=16.sp,color=Color.Gray,lineHeight=24.sp),hint=TextStyle(fontSize=14.sp,color=Color.LightGray,lineHeight=20.sp))valDarkTextStyles=AppTextStyles(title=TextStyle(fontSize=18.sp,fontWeight=FontWeight.SemiBold,color=Color.White,lineHeight=26.sp),content=TextStyle(fontSize=16.sp,color=Color.LightGray,lineHeight=24.sp),hint=TextStyle(fontSize=14.sp,color=Color.Gray,lineHeight=20.sp))//2.使用//主题样式的复用Text(text="标题",style=MaterialTheme.appTextStyles.title)Text(text="内容",style=MaterialTheme.appTextStyles.content)Text(text="提示",style=MaterialTheme.appTextStyles.hint)//主题样式复用时的微调Text(text="微调",style=MaterialTheme.appTextStyles.hint.copy(color=Color.Red,//红色fontWeight=FontWeight.Bold//粗体))

文字点击功能

普通点击事件中点击事件最好放在修饰符中尺寸、背景等之后，偏移与裁剪等设置之前
如：Modifier
.width(200.dp) // 1. 尺寸
.background(Color.Gray) // 2. 背景
.clickable { … } // 3. 点击
.offset(x = 10.dp) // 4. 偏移
.clip(RoundedCornerShape(12.dp)) // 5. 裁剪（圆角矩形）

常用的形式，默认带点击的涟漪效果

Text(text="文本具体内容",fontSize=20.sp,//字号modifier=Modifier//修饰符，用于控制尺寸、边距、对齐等布局行为.clickable(onClick={//普通场景点击，默认带有涟漪效果Toast.makeText(context,"点击",Toast.LENGTH_SHORT).show()}))

取消点击时涟漪效果

Text(text="文本具体内容",fontSize=20.sp,//字号modifier=Modifier//修饰符，用于控制尺寸、边距、对齐等布局行为.clickable(onClick={//普通场景点击，默认带有涟漪效果Toast.makeText(context,"点击",Toast.LENGTH_SHORT).show()},indication=null,//取消涟漪效果interactionSource=remember{MutableInteractionSource()}//取消时必须配合该参数))

文字超链接

注意文字超链接的关键在于这段文字不能使用传统的点击设置，而是需要对可点击部分设置，其他部分则不能设置

/** * 通过AnnotatedString构建带注解处理+样式的富文本 */valannotatedText=buildAnnotatedString{append("请点击")//拼接普通文本pushStringAnnotation(tag="URL",annotation="https://www.baidu.com")//为执行文本片段标记注解//对指定文本片段设置样式withStyle(style=SpanStyle(color=Color.Blue,textDecoration=TextDecoration.Underline)){//蓝色+下划线append("此处")}pop()//结束当前注解的作用域append("访问")}valcontext=LocalContext.current//获取compose提供的ContextText(text=annotatedText,modifier=Modifier.clickable{//从整个文本的start到end中查找tag="URL"的注解，返回List<StringAnnotation>valannotations=annotatedText.getStringAnnotations(//解析tag="URL",start=0,end=annotatedText.length)annotations.firstOrNull()?.let{//获取第一个匹配的注解Toast.makeText(context,"点击了链接",Toast.LENGTH_SHORT).show()}})

文字复制功能

全部可复制：

SelectionContainer(){//长按负值功能,此处时调用了默认的自定义长按选中并复制的功能页面Text(text=stringResource(id=R.string.contents),//文本color=Color.Red,//颜色fontSize=15.sp,//字号)}

部分可复制：

SelectionContainer(){Column(){//进行垂直排列Text(text="可复制部分1")Text(text="可复制部分2")DisableSelection{//内容包裹部分不可复制Text("不可复制部分1")Text("不可复制部分2")}Text(text="可复制部分3")}}