Jetpack Compose系列-Text组件花式使用！

最新推荐文章于 2024-03-30 16:54:30 发布

依然范特稀西

最新推荐文章于 2024-03-30 16:54:30 发布

阅读量1.7k

点赞数 5

分类专栏： Jetpack Compose

本文链接：https://blog.csdn.net/zwluoyuxi/article/details/116176938

版权

对于用户界面而言，文本是最基础而又核心的内容，在传统的 Android Native 开发中，需要用一个TextView来显示一个文本。在Jetpack Compose 中，提供了Text可组合函数（即组件，后面的文章都会称其为“组件”），可更轻松的显示文本。在本文中，将带大家一起探索Text组件的各种用法。

Text 属性介绍

在Jetpack Compose 中，组件是一个特殊的Kotlin 函数，因此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,
    // 最多显示几行
    maxLines: Int = Int.MAX_VALUE,
    // 计算布局时的回调
    onTextLayout: (TextLayoutResult) -> Unit = {
   },
    // 样式
    style: TextStyle = LocalTextStyle.current
) {
   
  ...
}

Jetpack Compose 中，很多地方都用到了Kotlin 的特性，比如这里，就用到Kotlin的默认参数，Text 组件除了第一个参数text，其他都有默认值，也就是使用的时候可以不传，但是如果传多个参数时，一定要加参数名。比如，设置大小：

@Composable
fun MyText(){
    Text("Jetpack Compose，by 依然范特稀西", 
        fontSize = 20.sp
    )
}

第一个参数可以加参数名，也可以不加，但我个人还是推荐加上，因为他是一个组件，参数是它的属性，这样代码比较直观。像下面这样就比较好一点：

@Composable
fun MyText(){
   
    Text(
        text = "Jetpack Compose，by 依然范特稀西",
        fontSize = 20.sp
    )
}

知道了，每个属性的意思，我们接下来一起看看，配置各属性后的效果展示。

Text各属性示例效果

text 显示文本