Jetpack：004-如何使用文本组件

我们在上一章回中介绍了Jetpack组件在布局中的对齐方式，本章回中主要介绍文 本组件的使用方法。闲话休提，让我们一起Talk Android Jetpack吧

1. 概念介绍

我们在本章回中介绍的文本组件主要用来显示文本内容，比如页面的标题，它是程序中常用的组件。在compose中没有组件的概念，所有的内容是可组合函数，我们称其为组件是复用了Android原生中的概念，这样方便大家理解。我们在后面的章回中也会复用这个概念。

文本组件通过Text()组合函数实现，我们在本章回中将详细介绍它的使用方法。

2. 使用方法

组合函数Text()提供了相关的参数来控制文本，下面是常用的参数，掌握这些常用参数后就可以使用文本组件了。

2.1 通用参数

• modifier参数：它用来装饰文本，它可以控制文本占用区域的大小，背景色等内容；

这个参数是所有组合函数都包含的参数，我们称其为通用参数，它的功能和用法在所有的组合函数中都一样，本章回中介绍完该参数后，其它章回中将不再介绍这个通用参数。

2.2 专用参数

• text参数：主要用来存放显示的文本；
• color参数：主要用来控制文本的颜色；
• fontSize参数：主要用来控制文本的字体大小；
• textAlign参数：主要用来控制文本的对齐方式；
• maxLines参数：主要用来控制文本的行数；

3. 示例代码

介绍完组合函数的参数后，我们通过具体的代码来演示它的用法，详细如下：

Box ( contentAlignment = Alignment.BottomEnd) {
    Text(
        modifier = Modifier
            .width(220.dp)
            .height(100.dp)
            .padding(8.dp)
            .background(color = Color.Yellow)
            .border(2.dp, color = Color.Red, shape = RectangleShape),
        text = stringResource(id = R.string.str_hello),
        color = Color.Blue,
        textAlign = TextAlign.Center,
        fontSize = 22.sp,
        maxLines = 1,
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们在上面的代码中创建了一个固定大小的区域，然后在该区域中通过组合函数Text()显示文本。我们通过函数的参数调整了文本的颜色和大小，下面是程序的运行效果图。

不过，我还发现一点遗憾：不能让文本垂直居中，我按照Flutter的思想，在文本外层嵌套一个容器仍然没有效果。欢迎大家在评论区讨论可以让文本垂直居中的方法。

4. 内容总结

最后，我们对本章回中的内容做一个总结：

• 显示文本通过Text()组件函数实现；
• 组合函数提供了相关的参数来控制文本的大小，颜色等参数；
• modifier是通用参数，所有组合函数都包含该参数；

看官们，关于Jetpack中文本组件的使用方法就介绍到这里，欢迎大家在评论区交流与讨论！