Jetpack Compose 文本 Text

显示文本

显示文字的最基本方法是使用以 String 作为参数的 Text 可组合项:

ts 复制代码
@Composable
fun SimpleText() {
    Text("Hello World")
}

显示资源中的文字

我们建议您使用字符串资源,而不是对 Text 值进行硬编码,因为使用字符串资源时您可以与 Android 视图共享相同的字符串,并为您的应用国际化做好准备:

ts 复制代码
@Composable
fun StringResourceText() {
    Text(stringResource(R.string.hello_world))
}

设置文本样式

更改文本颜色

ts 复制代码
@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

更改文字大小

ts 复制代码
@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

将文本设为斜体

使用 fontStyle 参数可以将文字设为斜体(或设置其他 [FontStyle])。

ts 复制代码
@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}

添加阴影

借助 style 参数,您可以设置一个类型为 [TextStyle] 的对象并配置多个参数,例如阴影。[Shadow] 会接收阴影颜色、偏移量或相对于 Text 所在的位置和模糊半径(用来控制模糊效果)。

ts 复制代码
@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}

在文本中添加多种样式

如需在同一 [Text] 可组合项中设置不同的样式,请使用 [AnnotatedString],这是一个可带有任意注解样式的字符串。

AnnotatedString 是一个数据类,其中包含:

  • 一个 Text
  • 一个 SpanStyleRangeList,等同于位置范围在文字值内的内嵌样式
  • 一个 ParagraphStyleRangeList,用于指定文字对齐、文字方向、行高和文字缩进样式

[TextStyle] 用于 Text 可组合项,而 [SpanStyle] 和 [ParagraphStyle] 用于 AnnotatedString。如需详细了解段落中的多种样式,请参阅[在段落中添加多种样式]。

AnnotatedString 具有[类型安全的构建器],以便您更轻松地创建:[buildAnnotatedString]

ts 复制代码
@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}

通过 Brush 启用高级样式设置

使用 TextStyle 中的内置 Brush 配置文本。例如,您可以为文本配置 [linearGradient] Brush,如下所示

ts 复制代码
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)

您不限于这种特定的配色方案或配色风格。虽然我们提供了一个要突出显示的简单示例,但您可以使用任意内置 [Brush],甚至只使用 [SolidColor] 来美化文本。

集成

由于您可以将 BrushTextStyleSpanStyle 一起使用,因此与 [TextField] 和 [buildAnnotatedString] 的集成是无缝的。

如需详细了解如何在 TextField 中使用 Brush API,请参阅[使用 Brush API 设置输入样式]。

使用 SpanStyle 的其他样式设置

对一段文本应用画笔

如果您只想将 Brush 应用于文本的某些部分,请使用 [buildAnnotatedString] API,以及所选的 Brush 和渐变效果。

ts 复制代码
Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
文本跨度中的不透明度

如需调整特定文本跨度的不透明度,请使用 [SpanStyle] 的可选 alpha 参数。对文本的两个部分使用同一笔刷,并更改相应 span 中的 alpha 参数。在代码示例中,第一个文本跨度以半不透明度 (alpha =.5f) 显示,而第二个文本跨度以完全不透明度 (alpha = 1f) 显示。

ts 复制代码
val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
相关推荐
编程、小哥哥5 分钟前
python操作mysql
android·python
Couvrir洪荒猛兽32 分钟前
Android实训十 数据存储和访问
android
五味香3 小时前
Java学习,List 元素替换
android·java·开发语言·python·学习·golang·kotlin
十二测试录3 小时前
【自动化测试】—— Appium使用保姆教程
android·经验分享·测试工具·程序人生·adb·appium·自动化
Couvrir洪荒猛兽5 小时前
Android实训九 数据存储和访问
android
aloneboyooo5 小时前
Android Studio安装配置
android·ide·android studio
Jacob程序员5 小时前
leaflet绘制室内平面图
android·开发语言·javascript
2401_897907866 小时前
10天学会flutter DAY2 玩转dart 类
android·flutter
m0_748233647 小时前
【PHP】部署和发布PHP网站到IIS服务器
android·服务器·php
Yeats_Liao8 小时前
Spring 定时任务:@Scheduled 注解四大参数解析
android·java·spring