样式文本

可组合项 Text 具有多个可选参数来设置其内容的样式。下面,我们列出了涵盖文本最常见用例的参数。有关 Text 的所有参数,请参阅 Compose Text 源代码

每当您设置这些参数之一时,您就是在将样式应用于整个文本值。如果您需要在同一行或段落中应用多种样式,请参阅有关 多行内样式 的部分。

常见文本样式

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

更改文本颜色

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

The words

更改文本大小

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

The words

使文本斜体

使用 fontStyle 参数使文本斜体(或设置其他 FontStyle)。

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

The words

使文本加粗

使用 fontWeight 参数使文本加粗(或设置其他 FontWeight)。

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

The words

添加阴影

使用 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
            )
        )
    )
}

The words

在文本中添加多种样式

要在同一 Text 可组合项中设置不同的样式,请使用 AnnotatedString,这是一种可以用任意注释样式进行注释的字符串。

AnnotatedString 是一个包含以下内容的数据类:

  • 一个 Text
  • 一个 List,包含 SpanStyleRange,等效于文本值内具有位置范围的行内样式
  • 一个 List,包含 ParagraphStyleRange,指定文本对齐方式、文本方向、行高和文本缩进样式

TextStyle 用于 Text 可组合项,而 SpanStyleParagraphStyle 用于 AnnotatedString。有关段落中多种样式的更多信息,请参阅 在段落中添加多种样式

AnnotatedString 具有一个 类型安全构建器,以便于创建: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")
        }
    )
}

The words

使用 Brush 启用高级样式

要启用更高级的文本样式,您可以将 Brush API 与 TextStyleSpanStyle 配合使用。在您通常使用 TextStyleSpanStyle 的任何位置,您现在也可以使用 Brush

使用笔刷进行文本样式设置

使用 TextStyle 中的内置笔刷配置您的文本。例如,您可以将 linearGradient 笔刷配置到您的文本中,如下所示

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

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

Using Brush API’s `linearGradient` function with a defined list of colors.
图 2. 使用 Brush API 的 linearGradient 函数和定义的颜色列表。

您不限于此特定的配色方案或着色样式。虽然我们提供了一个简单的示例来突出显示,但您可以使用任何内置的 笔刷,甚至只是一个 SolidColor 来增强您的文本。

集成

由于您可以将 BrushTextStyleSpanStyle 结合使用,因此与 TextFieldbuildAnnotatedString 的集成是无缝的。

有关在 TextField 中使用笔刷 API 的更多信息,请参阅 使用 Brush API 设置输入样式

使用 SpanStyle 进行其他样式设置

将笔刷应用于文本的一部分

如果您只想将笔刷应用于文本的一部分,请使用 buildAnnotatedStringSpanStyle 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.")
    }
)

Using a default brush with linearGradient as a style for Text.
图 4. 使用默认笔刷和 linearGradient 作为 Text 的样式。
文本的一部分中的不透明度

要调整特定文本跨度的透明度,请使用 SpanStyle 的可选 alpha 参数。对文本的两部分使用相同的笔刷,并在相应的跨度中更改 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 ❤️")
    }
}

Using buildAnnotatedString and SpanStyle’s alpha parameter, along with linearGradient to add opacity to a span of text.
图 5. 使用 buildAnnotatedStringSpanStyle 的 alpha 参数,以及 linearGradient 为文本跨度添加不透明度。

其他资源

有关其他自定义示例,请参阅 Compose 文本着色的润色 博客文章。如果您有兴趣详细了解 Brush 如何与我们的动画 API 集成,请参阅 在 Compose 中设置动画笔刷文本着色

将跑马灯效果应用于文本

您可以将 basicMarquee 修饰符应用于任何可组合项以产生动画滚动效果。如果内容太宽而无法适应可用约束,则会发生跑马灯效果。默认情况下,basicMarquee 具有某些配置(例如速度和初始延迟),但您可以修改这些参数来自定义效果。

以下代码段在 Text 可组合项上实现了基本的跑马灯效果

@OptIn(ExperimentalFoundationApi::class)
@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
        )
    }
}

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