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
)

基础用法

Text(text = "hello world")

 Text(text = stringResource(R.string.content))

参数介绍

text 文字内容

Text(text = "hello world")

color 文字颜色

Text(text = "hello world" , color = Color.Red )

fontSize 文字大小

Text(text = "hello world", color = Color.Red, fontSize = 16. sp)

fontStyle 文字的风格

FontStyle.Italic 设置为斜体

FontStyle.Normal 设置为正常体(默认状态)

Text(
    text = "hello world",
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic
)

fontWeight 文字加粗

Text(
    text = "hello world",
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight( 10 )
)

fontFamily 文字字体

可以使用官方提供的字体：FontFamily.Default、FontFamily.SansSerif、FontFamily.Serif、FontFamily.Monospace、FontFamily.Cursive

可以使用自己导入的字体

Text(
    text = "hello world",
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace
)

Text(
    text = "hello world",
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily ( Font (R.font. font_test )) // font_test 为引入的资源文件
)

letterSpacing 字间距

注意：这里只能用 sp 不能用 dp

Text(
    text = "hello world",
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5. sp
)

textDecoration 文字装饰

TextDecoration.None 无装饰（默认）

TextDecoration.Underline 下划线

TextDecoration.LineThrough 删除线

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline
)

textAlign 文字对其方式

需要固定宽度才有效果****

TextAlign.Center 居中对其

TextAlign.Left 左对齐

TextAlign.End 右对齐

TextAlign.Justify 整行排满的对其方式

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline,
    textAlign = TextAlign.Justify
)

lineHeight 文本行高

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline,
    textAlign = TextAlign.Justify,
    lineHeight = 10. sp
)

overflow 设置文本超出时如何显示

TextOverflow.Ellipsis 省略号显示

TextOverflow.Clip 裁减掉

TextOverflow.Visible 尽可能的去展示

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp)
        .height(50.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline,
    textAlign = TextAlign.Justify,
    lineHeight = 10.sp,
    overflow = TextOverflow.Ellipsis
)

maxLine 文本最大显示行数

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp)
        .height(50.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline,
    textAlign = TextAlign.Justify,
    lineHeight = 10.sp,
    overflow = TextOverflow.Ellipsis,
    maxLines = 1
)

style 风格样式

上面的大部分样式，也是可以通过style去设置的。

Text(
    text = "Jetpack Compose 是用于构建原生 Android 界面的新工具包",
    modifier = Modifier.width(200.dp)
        .height(50.dp),
    color = Color.Red,
    fontSize = 16.sp,
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight(10),
    fontFamily = FontFamily.Monospace,
    letterSpacing = 5.sp,
    textDecoration = TextDecoration.Underline,
    textAlign = TextAlign.Justify,
    lineHeight = 10.sp,
    overflow = TextOverflow.Ellipsis,
    maxLines = 1,
    style = TextStyle(color = Color.Blue) //这里没效果，因为以外面的为主
)

TextStyle 参数如下

constructor(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified, //设置背景色
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null, //设置阴影
    textAlign: TextAlign? = null,
    textDirection: TextDirection? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    textIndent: TextIndent? = null //设置缩进
)

一行文字设置不同样式

通过 buildAnnotatedString 去构建一个带有样式的 text

Text(text = buildAnnotatedString {
 withStyle(style = SpanStyle(color = Color.Red)) {
append("hello")
    }
 withStyle(style = SpanStyle(color = Color.Blue)) {
append("world")
    }
} )

Jetpack Compose 之 Text

Text 文本显示控件

基础用法

参数介绍