设置文本样式

Text 可组合项有多个用于为其内容设置样式的可选参数。 我们在下面列出了一些参数，这些参数涵盖了最常见的文本用例。 如需了解 Text 的所有参数，请参阅 Compose Text 源代码。

每当您设置其中任何一个参数，都会将样式应用于整个文字值。如果您需要在同一行中应用多种样式，或 请参阅多个内嵌 样式。

常见文本样式

以下各部分介绍了设置文本样式的常见方式。

更改文本颜色

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

更改文字大小

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

将文本设为斜体

使用 fontStyle 参数可以将文字设为斜体（或设置其他 FontStyle）。

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

将文本设为粗体

使用 fontWeight 参数将文字设为粗体（或设置其他 FontWeight）。

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

添加阴影

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

@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
            )
        )
    )
}
TextSnippets.kt

在文本中添加多种样式

如需在同一 Text 可组合项中设置不同的样式，请使用 AnnotatedString，该字符串可使用任意注解样式加以注解。

AnnotatedString 是一个数据类，其中包含：

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

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

AnnotatedString 具有 type-safe 类型值 构建器 以便更轻松地创建：buildAnnotatedString。

@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")
        }
    )
}
TextSnippets.kt

使用 Brush 启用高级样式

如需启用更高级的文本样式，您可以将 Brush API 与 TextStyle和SpanStyle。您通常会 使用 TextStyle 或 SpanStyle，现在还可以使用 Brush。

注意 ：Brush API 当前在 TextStyle 中的使用处于实验阶段。 实验性 API 未来可能会发生变化。

使用画笔设置文本样式

使用 TextStyle 中的内置画笔配置文本。例如，您可以按如下方式为文本配置 linearGradient 画笔：

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

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

图 2. 将 Brush API 的 linearGradient 函数与定义的颜色列表搭配使用。

您可以使用不限于这种特定的配色方案或配色样式。虽然 我们提供了一个简单示例来强调一下，您可以使用 画笔甚至 SolidColor 来美化文字。

集成

由于您可以将 Brush 与 TextStyle 和 SpanStyle 一起使用， 与 TextField 和 buildAnnotatedString 无缝集成。

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

使用 SpanStyle 进行其他样式设置

将画笔应用于部分文本

如果您只想对文本的某些部分应用画笔，请使用 buildAnnotatedString、SpanStyle API，以及您的画笔 和梯度值。

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.")
    }
)
TextSnippets.kt

图 4. 使用默认画笔，并将 linearGradient 用作 Text 的样式。

文本段的不透明度

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

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

图 5. 使用 buildAnnotatedString 和 SpanStyle 的 alpha 参数以及 linearGradient 为文本段添加不透明度。

其他资源

如需查看其他自定义示例，请参阅回顾 Compose 文本 涂色博文。如果您想详细了解 Brush 如何与我们的 Animations API 集成，请参阅以动画形式呈现画笔文本着色 。

对文本应用选取框效果

您可以将 basicMarquee 修饰符应用于任何可组合项， 从而产生动画滚动效果。如果内容太宽，超出可用约束条件，就会出现 Marquee 效果。默认情况下，basicMarquee 会设置特定的配置（例如速度和初始延迟时间），但您可以修改这些参数以自定义效果。

以下代码段在 Text 可组合项上实现了基本轮播效果：

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

图 6. 应用于文本的 basicMarquee 修饰符。