O elemento combinável Text
tem vários parâmetros opcionais para definir o estilo do conteúdo.
Abaixo, listamos os parâmetros que abrangem os casos de uso mais comuns com texto.
Para todos os parâmetros de Text
, consulte o código-fonte de texto
do Compose.
Sempre que você definir um desses parâmetros, o mesmo estilo será aplicado a todo o valor do texto. Se você precisar aplicar vários estilos na mesma linha ou parágrafos, consulte a seção sobre vários estilos in-line.
Estilos comuns de texto
As seções a seguir descrevem maneiras comuns de estilizar seu texto.
Mudar a cor do texto
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Mudar o tamanho do texto
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Aplicar itálico ao texto
Use o parâmetro fontStyle
para aplicar itálico ao texto ou defina outro
FontStyle
.
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Usar negrito no texto
Use o parâmetro fontWeight
para aplicar negrito ao texto ou defina outro FontWeight
.
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Adicionar sombra
O parâmetro style
permite definir um objeto do tipo TextStyle
e configurar vários parâmetros, por exemplo, sombra.
Shadow
recebe uma cor
para a sombra, o deslocamento ou a localização em relação ao Text
e
ao raio de desfoque, que é a intensidade do efeito desfocado.
@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 ) ) ) }
Adicionar vários estilos a um texto
Para definir estilos diferentes no mesmo elemento combinável Text
, use um AnnotatedString
,
uma string que pode receber estilos de anotações arbitrárias.
AnnotatedString
é uma classe de dados que contém:
- Um valor
Text
- Uma
List
deSpanStyleRange
, equivalente ao estilo inline com intervalo de posições dentro do valor de texto - uma
List
deParagraphStyleRange
, especificando o alinhamento, a direção, a altura da linha e o estilo de recuo do texto.
TextStyle
é usado
no elemento combinável Text
, enquanto SpanStyle
e ParagraphStyle
são para uso em AnnotatedString
. Para saber mais sobre vários estilos em um parágrafo, consulte Adicionar vários estilos em um parágrafo.
AnnotatedString
tem um builder de tipo
seguro (link em inglês)
para facilitar a criação: 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") } ) }
Ativar o estilo avançado com Brush
Para ativar um estilo de texto mais avançado, use a API Brush
com
TextStyle
e SpanStyle
. Em qualquer lugar em que você normalmente
usa TextStyle
ou SpanStyle
, agora também é possível usar Brush
.
Usar um pincel para estilizar o texto
Configure o texto usando um pincel integrado no TextStyle
. Por exemplo, você
pode configurar um pincel linearGradient
no texto da seguinte maneira:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
Você não se limita a esse esquema de cores ou estilo de cores específico. Embora
tenhamos um exemplo simples para destacar, use qualquer um dos
pincéis integrados ou apenas uma SolidColor
para melhorar o texto.
Integrações
Como é possível usar Brush
com TextStyle
e SpanStyle
,
a integração com TextField
e buildAnnotatedString
é perfeita.
Para saber mais sobre como usar a API de pincel em um TextField
, consulte
Entrada de estilo com a API Brush.
Mais estilo usando SpanStyle
Aplicar um pincel em um trecho do texto
Se você quiser aplicar um pincel apenas em partes do texto, use
buildAnnotatedString
e a API SpanStyle
com o pincel
e o gradiente de sua preferência.
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.") } )
Opacidade em um trecho do texto
Para ajustar a opacidade de um determinado período de texto, use o parâmetro opcional alpha
do
SpanStyle
. Use o mesmo pincel para
as duas partes de um texto e mude o parâmetro Alfa no período correspondente.
No exemplo de código, o primeiro período do texto é exibido na meia opacidade
(alpha =.5f
), enquanto o segundo é exibido na opacidade total (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 ❤️") } }
Outros recursos
Para ver mais exemplos de personalização, consulte a postagem do blog Como aperfeiçoar a coloração
de texto do Compose. Se você quiser saber mais sobre
como o Brush
se integra à nossa API Animations, consulte Animar a cor de texto do pincel
no Compose.
Aplicar efeito de letreiro ao texto
Você pode aplicar o modificador basicMarquee
a qualquer elemento combinável para
produzir um efeito de rolagem animado. O efeito de letreiro ocorre se o conteúdo
for muito largo para caber nas restrições disponíveis. Por padrão, o basicMarquee
tem
determinadas configurações (como velocidade e atraso inicial) definidas, mas é possível
modificar esses parâmetros para personalizar o efeito.
O snippet a seguir implementa um efeito de letreiro básico em um elemento combinável 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 ) } }
Figura 6. Modificador basicMarquee
aplicado ao texto.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Parágrafo de estilo
- Material Design 2 no Compose
- Modificadores gráficos