Compose | UI组件(二) | Text() 文本组件

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修饰符