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,                       //控制文本是否换行,为false，则定位maxLines: Int = Int.MAX_VALUE,                  //文本最大几行onTextLayout: (TextLayoutResult) -> Unit = {},  //文本发生变化之后的回调函数style: TextStyle = LocalTextStyle.current       //文本风格配置(颜色,字体,行高)
)

Text() 显示文字

显示文字内容

//指定字符串
Text(text="Hello World")
//指定文字资源
Text(text= stringResource(id = R.string.app_hello_world))<string name="app_hello_world">HelloWorld</string>

fontSize 文字大小

Text(text="Hello World", fontSize = 16.sp)

textAlign 文字对齐方式

//左对齐 TextAlign.Start 或者 TextAlign.Left
Text(text="Hello World",modifier = Modifier.fillMaxWidth(),fontSize = 16.sp,textAlign = TextAlign.Start)
//居中对齐 TextAlign.Center
Text(text="Hello World",modifier = Modifier.fillMaxWidth(),fontSize = 16.sp,textAlign = TextAlign.Center)
//右对齐 TextAlign.End 或者 TextAlign.Right
Text(text="Hello World",modifier = Modifier.fillMaxWidth(),fontSize = 16.sp,textAlign = TextAlign.End)

注：如果是 Column 设置水平对齐方式，一定要加 modifier = Modifier.fillMaxWidth() 否则设置对齐无效

style 文字样式

设置文本样式

Text(text  = "HelloWorld\n"+"Goodbye World Boy",style = TextStyle(fontSize = 25.sp,                         //字体大小fontWeight = FontWeight.W900,             //字体粗细background = Color.Red,                   //背景lineHeight = 60.sp,                       //行高letterSpacing = 4.sp,                     //字体间距textDecoration = TextDecoration.Underline //下滑线)
)

fontFamily 文字字体

//fontFamily字体风格
Text(text = "Hello World", fontFamily = FontFamily.Monospace)
Text(text = "Hello World", fontFamily = FontFamily.Cursive)

AnnotatedString 多样式文字

AnnotatedString设置一段多样式的文字结合体

Text(text = buildAnnotatedString {withStyle(style = SpanStyle(fontSize = 24.sp)){append("我是")}withStyle(style = SpanStyle(fontSize = 30.sp,textDecoration = TextDecoration.Underline,fontWeight = FontWeight.W900,color = Color(0xFF59A869))){append("谭祖爱")}
})

注：buildAnnotatedString{…}，以DSL方式构建一个 AnnotatedString 。其中 append 用来添加字符串文本，withStyle 为 append 的字符串指定文字或段落样式

maxLines 设置文本单行显示

Text(text  = "HelloWorld "+"Goodbye World Boy",style = TextStyle(fontSize = 25.sp,             //字体大小fontWeight = FontWeight.W900, //字体粗细background = Color.Red,       //背景lineHeight = 60.sp,           //行高letterSpacing = 4.sp,         //字体间距textDecoration = TextDecoration.Underline //下滑线),maxLines = 1, //文本显示行数overflow = TextOverflow.Ellipsis //Ellipsis 处理一行文字过长，以...代替
)

SelectionContainer 选中文字

SelectionContainer {Text(text = "Hello World", fontFamily = FontFamily.Monospace)
}

注：Text 默认是没有长按选择，Compose 提供了专门长按选择组件 SelectionContainer 。这里可见 Compose 在组件设计上，将关注点分离原则做到了极致

总结

1. Text() 显示文字的组件
2. fontSize 设置文字大小
3. textAlign 设置文字对齐方式
4. style 设置文字的样式
5. fontFamily 设置文字风格
6. SelectionContainer 选中文字的组件
7. maxLines 配合 overflow 等于 TextOverflow.Ellipsis 单行显示，文本过长，以 … 代替

想了解 Modifier 修饰符 用法，可移步：Compose | UI组件(一) | Modifier修饰符