显示文本
显示文字的最基本方法是使用以 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 ❤️")
}
}