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 值
  • 一个 SpanStyleRange 的 List,等同于位置范围在文字值内的内嵌样式
  • 一个 ParagraphStyleRange 的 List,用于指定文字对齐、文字方向、行高和文字缩进样式

`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` 来美化文本。

集成

由于您可以将 Brush 与 TextStyle 和 SpanStyle 一起使用,因此与 `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 ❤️")
    }
}
相关推荐
驰骋工作流9 小时前
流程时效考核的表结构:从待办时限到 WF_CH 考核结果驰骋BPM驰骋低代码低代码工作流引擎
android·低代码·rxjava
传奇开心果编程10 小时前
【Flutter踩坑排雷】第7课:巨型 build 函数坑|全部 UI 写在同一个 build,维护难、隐性异常
android·flutter·ios·移动开发·跨平台·dart·声明式ui
方白羽14 小时前
Android 双开环境底层剖析与风控检测落地
android·安全·app
weixin_5633714714 小时前
Android Studio 2024 版 Device Explorer 打开方法
android·ide·android studio
AIsoft_868917 小时前
职场音频文件怎么整理?录音APP有哪些用法
android·音视频
booboosui17 小时前
第一批个人 Agent 用户正在卸载,问题不在模型,在它住在哪儿
android
洞见前行17 小时前
点击图标到内容出现,你的 App 在这几秒里做了什么:Android 冷启动全链路优化实战
android·性能优化·android studio
凯基迪科技17 小时前
芯片UID绑定修改 加密与逆向修改思路分析
android
Liben18 小时前
Weex开发踩坑记录
android·前端·ios
救救孩子把20 小时前
结构化输出为何“格式正确、答案错误”?JSON Schema 的能力边界
android·java·json·agent·agent服务