Jetpack Compose中的基本组件-文本组件(Text)

发表于 | 分类于
Jetpack Compose中的基本组件-文本组件(Text)

前言

除了布局组件外，Jetpack Compose 还提供了一系列其他常用的 UI 组件。

https://developer.android.google.cn/jetpack/compose/components?hl=zh-cn

https://developer.android.google.cn/courses/pathways/compose?hl=zh-cn

文本

Text（文本）:

1
Text("Hello, World!")

文本居中

1
2
3
4
5
6
7
8
Text(
    text = "A",
    modifier = Modifier
        .background(Color.Red)
        .width(30.dp).height(30.dp)
        .wrapContentSize(Alignment.Center),
    textAlign = TextAlign.Center,
)

设置行数

1
2
3
4
5
6
7
8
9
Text(
    text = "ABC",
    modifier = Modifier
        .background(Color.Red)
        .width(30.dp).height(30.dp)
        .wrapContentSize(Alignment.Center),
    textAlign = TextAlign.Center,
    maxLines = 1
)

超出省略号

1
2
3
4
5
6
7
Text(
    text = "第九章 平面直角坐标平面直角坐标平面直角坐标",
    fontSize = 12.sp,
    color = Color.White,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

字体粗细

1
2
3
4
Text(
    text = "这是加粗的文本",
    fontWeight = FontWeight.Bold
)

对应的值

1
2
3
4
5
6
7
8
9
@Stable val Thin = W100
@Stable val ExtraLight = W200
@Stable val Light = W300
@Stable val Normal = W400
@Stable val Medium = W500
@Stable val SemiBold = W600
@Stable val Bold = W700
@Stable val ExtraBold = W800
@Stable val Black = W900

文字渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Composable
fun ZTextGradient(
    text: String,
    colorList: List<Color> = listOf(Color.Blue, Color.Cyan),
    fontSize: TextUnit = 12.sp,
    fontWeight: FontWeight = FontWeight.Normal,
) {
    val verticalGradient = Brush.linearGradient(
        colors = colorList,
        start = Offset(0f, 0f),               // 起点：左上角
        end = Offset(0f, Float.POSITIVE_INFINITY) // 终点：正下方（垂直方向）
    )

    Text(
        text = text,
        style = TextStyle(
            brush = verticalGradient,
            fontSize = fontSize,
            fontWeight = fontWeight
        )
    )
}

使用

1
2
3
4
5
6
ZTextGradient(
    text = "学习资料",
    colorList = listOf(Color(0xff61FFFF), Color(0xffA8FFE4)),
    fontSize = 16.sp,
    fontWeight = FontWeight.W700
)

颜色字体封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import androidx.compose.ui.graphics.Color

object ZColorUtils {
    fun hexToColor(hex: String): Color {
        val tempStr = hex.removePrefix("#")
        if (tempStr.length == 6) {
            val r: Int = tempStr.substring(0, 2).toLong(16).toInt()
            val g: Int = tempStr.substring(2, 4).toLong(16).toInt()
            val b: Int = tempStr.substring(4, 6).toLong(16).toInt()
            return Color(r, g, b, 255)
        } else if (tempStr.length == 8) {
            val r: Int = tempStr.substring(0, 2).toLong(16).toInt()
            val g: Int = tempStr.substring(2, 4).toLong(16).toInt()
            val b: Int = tempStr.substring(4, 6).toLong(16).toInt()
            val a = tempStr.substring(6, 8).toLong(16).toInt()
            return Color(r, g, b, a)
        }
        return Color.White
    }
}

组件封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.sp
import com.xhkjedu.zxs_android.utils.ColorUtils


@Composable
fun TextColorSize(
    text: String = "",
    color: String = "#ffffff",
    size: Int = 12
) {
    val colorHex = ZColorUtils.hexToColor(color)
    Text(text = text, fontSize = size.sp, color = colorHex)
}

使用

1
2
3
4
5
TextColorSizeComp(
    text = "你好",
    size = 10,
    color = "#ffffff"
)

排版

文字居中

因为字体的原因导致的不居中只能使用偏移实现了

1
2
3
4
5
6
7
8
9
Text(
    text = "去练习",
    fontSize = 11.sp,
    color = Color(0xff4B45FF),
    textAlign = TextAlign.Center,
    modifier = Modifier
        .align(Alignment.Center)
        .offset(y = (-2).dp)
)

两端对齐（Justify）

多行文本

从 Compose 1.2.0 开始，Text 支持 textAlign = TextAlign.Justify，但仅在多行文本（maxLines > 1）且启用了 softWrap 时有效。

1
2
3
4
5
6
7
8
Text(
    text = "这是一段用于测试两端对齐效果的文本内容，它会自动在固定宽度内进行换行并对齐。",
    modifier = Modifier
        .width(200.dp), // 固定宽度
    textAlign = TextAlign.Justify,
    softWrap = true,
    maxLines = Int.MAX_VALUE // 或指定最大行数
)

单行文本

TextAlign.Justify对单行文本无效，可以对文字进行拆分，放在Row中然后两端对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Composable
fun ZTextColorSizeJustifyComp(
    text: String = "",
    fontColor: Color = CommonTheme.ColorBlackMain,
    fontSize: TextUnit = 12.sp,
    fontWeight: FontWeight = FontWeight.Normal,
    width: Dp = 80.dp,
) {
    Row(
        modifier = Modifier.width(width),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        text.forEach { word ->
            Text(
                text = "${word}",
                fontSize = fontSize,
                lineHeight = fontSize,
                color = fontColor,
                fontWeight = fontWeight,
                textAlign = TextAlign.Justify,
            )
        }
    }
}

组件提取

因为Compose组件本质都是方法，所以可以使用提取方法来提取组件

快捷键：Ctrl+Alt+M