Jetpack Compose之Text

基本使用

Text是显示文本的组件，最常用的组件，都没有之一，text参数是必须要传的，其它的可以为空。基本用法如下：

Text(text = "ping 老师很帅")

通常我们都会把文字放到string.xml文件里面，在Compose的Text里面，需要使用stringResource(id)来获取string.xml里面的值：

Text(text = stringResource(id = R.string.ping))

color

设置color参数可以调整text的文字颜色

Text(text = stringResource(id = R.string.ping),color = Color.Red)

fontSize

fontSize参数可以调整text文字大小

Text(text = stringResource(id = R.string.ping),
    color = Color.Red,
    fontSize = 18.sp
)

maxLines

maxLines参数可以设置文本显示的最大行数

Text(text = stringResource(id = R.string.pings),
    maxLines = 2
)

overflow

overflow设置文字显示不下时的显示方式，TextOverflow.Clip 超出部分截断不显示，TextOverflow.Ellipsis 显示省略号，TextOverflow.Visible 显示省所有文本，如果显示不下，则会显示到屏幕外面：

Text(text = stringResource(id = R.string.pings),
	maxLines = 1,
	overflow = TextOverflow.Ellipsis
)

fontStyle

fontStyle可以设置字体的风格，如斜体：

Text(text = stringResource(id = R.string.ping),
   color = Color.Red,
   fontSize = 18.sp,
   fontStyle = FontStyle.Italic
)

fontWeight

fontWeith参数可以调整text文字粗细，接收的是一个FontWeight对象，系统给我定义了一些合适的大小，比如
FontWeight.Bold 粗体

Text(text = stringResource(id = R.string.ping),
    color = Color.Red,
    fontSize = 18.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight.Bold
)

我们也可以自己定义FontWeight

val W1000 = FontWeight(11000)

Text(text = stringResource(id = R.string.ping),
    color = Color.Red,
    fontSize = 18.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = W1000
)

注意：fontWeight的范围为[1,1000]，小于1会使用1，大于1000会使用1000！

textAlign

通过 textAlign 参数，可以设置文字的对齐方式。
默认情况下，Text 会根据其内容值选择自然的文字对齐方式：

• 对于从左到右书写的文字，如拉丁语、西里尔文或朝鲜文，向 Text 容器的左边缘对齐
• 对于从右到左书写的文字，如阿拉伯语或希伯来语，向 Text 容器的右边缘对齐

Text(text = stringResource(id = R.string.ping),
    textAlign = TextAlign.Center,
    modifier = Modifier.width(200.dp)
)

值	效果
TextAlign.Center	文字居中对齐
TextAlign.Left	文字靠左对齐
TextAlign.Right	文字靠右对齐
TextAlign.Justify	文字拉伸填满容器的宽度
TextAlign.Start	文字对齐到容器的前端，有些语言的前端是右边，有些语言的前端是左边，会根据系统设置的语言变化，对于中文，效果和TextAlign.Left一样
TextAlign.End	文字对齐到容器的末尾

textDecoration

textDecorantion参数，用于设置文本的下划线和中划线， TextDecoration.Underline下划线， TextDecoration.LineThrough中划线

Text(text = stringResource(id = R.string.ping),
    textDecoration = TextDecoration.Underline
)

TextDecoration还提供了一个combine函数，可以将下划线和中划线组合：

val combineDecoration = listOf(TextDecoration.Underline, TextDecoration.LineThrough)
Text(
    text = stringResource(R.string.ping),
    textDecoration = TextDecoration.combine(combineDecoration)
)

fontFamily

fontFamily 参数，用于设置可组合项中使用的字体。默认情况下，系统会添加 Serif、Sans Serif、等宽和 Cursive 字体系列：

Text(text = stringResource(id = R.string.ping),
    fontFamily = FontFamily.SansSerif
)

可以自己指定其它的字体，把字体文件放到res/font文件夹下，使用FontFamily来读取：

//读取res/font文件夹下的字体资源
val myFont = FontFamily(Font(R.font.my_font))
Column( modifier = Modifier.width(100.dp)) {
   Text(text = stringResource(id = R.string.ping),
        fontFamily = myFont
   )
}

如果文本中需要添加不同的样式，则需要使用 **AnnotatedString**，在**AnnotatedString**中可以使用_withStyle_来设置每个文字的样式

Text(
    buildAnnotatedString {
       withStyle(style = SpanStyle(color = Color.Blue)) {
           append("ping")
       }
       append("老师")
       withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
           append("很帅")
       }
       append("！")
})

SelectionContainer

默认情况下，文字不可选择，这意味着在默认情况下用户无法从您的应用中选择和复制文字。要启用文字选择，需要使用 SelectionContainer 可组合项封装文字元素：

SelectionContainer {
    Text(text = stringResource(id = R.string.pings),
         maxLines = 1,
         overflow = TextOverflow.Ellipsis
    )
}

如果在文字段落中，有部分文字不可选择，则可以使用DisableSelection：

SelectionContainer () {
    Column() {
        Text(text = stringResource(id = R.string.pings),
             maxLines = 1,
             overflow = TextOverflow.Ellipsis
        )
        DisableSelection {
            Text(text = stringResource(id = R.string.pings),
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
            )
        }
    }
}

DisableSelection里面的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
) {
  ...
}

ClickableText

val annotatedText = buildAnnotatedString {
    append("勾选即代表同意")
    //添加Tag
    pushStringAnnotation(
        tag = "tag",
        annotation = "用户协议"
    )
    withStyle(
        style = SpanStyle(
            color = Color(0xFF0E9FF2),
            fontWeight = FontWeight.Bold
        )
    ) {
        append("用户协议")
    }
    //必须调用pop()，不然后面append添加的内容都会响应点击事件
    pop()
}

ClickableText(
    text = annotatedText,
    onClick = { offset ->
        annotatedText.getStringAnnotations(
            tag = "tag", start = offset,
            end = offset
        ).firstOrNull()?.let { annotation ->
            Log.d(TAG, "你已经点到 ${annotation.item}")
        }
    }
)