Text
可组合项有多个用于为其内容设置样式的可选参数。
我们在下面列出了一些参数,这些参数涵盖了最常见的文本用例。
如需了解 Text
的所有参数,请参阅 Compose Text
源代码。
每当您设置其中任何一个参数,都会将样式应用于整个文字值。如果您需要在同一行中应用多种样式,或 请参阅多个内嵌 样式。
常见文本样式
以下部分介绍了设置文本样式的常见方式。
更改文本颜色
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
更改文字大小
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
将文本设为斜体
使用 fontStyle
参数可以将文字设为斜体(或设置其他 FontStyle
)。
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
将文本设为粗体
使用 fontWeight
参数将文字设为粗体(或设置其他 FontWeight
)。
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
添加阴影
借助 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 ) ) ) }
在文本中添加多种样式
在同一个 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") } ) }
使用 Brush
启用高级样式
如需启用更高级的文本样式,您可以将 Brush
API 与
TextStyle
和SpanStyle
。您平常会接触到的
使用 TextStyle
或 SpanStyle
,现在还可以使用 Brush
。
使用画笔设置文本样式
使用 TextStyle
中的内置画笔配置文本。例如,您
可以为文本配置 linearGradient
笔刷,如下所示:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![使用 Brush API 的 `LinearGradient` 函数以及定义的颜色列表。](https://developer.android.google.cn/static/develop/ui/compose/images/text-designmain.png?authuser=5&hl=bg)
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.") } )
![使用默认画笔,并将 LinearGradient 用作文本样式。](https://developer.android.google.cn/static/develop/ui/compose/images/text-style.png?authuser=5&hl=bg)
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 ❤️") } }
![使用 buildAnnotatedString 和 SpanStyle 的 alpha 参数以及 LinearGradient 提高文本跨度的不透明度。](https://developer.android.google.cn/static/develop/ui/compose/images/text-opacity.png?authuser=5&hl=bg)
buildAnnotatedString
和 SpanStyle
的 alpha 参数以及 linearGradient
,以增加文本跨度的不透明度。其他资源
如需查看其他自定义示例,请参阅回顾 Compose 文本
涂色博文。如果您想详细了解
Brush
如何与我们的 Animations API 集成,请参阅以动画形式呈现画笔文本着色
编写代码。
对文本应用选取框效果
您可以将 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
修饰符。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 设置段落样式
- Compose 中的 Material Design 2
- 图形修饰符