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 Escrever texto
código-fonte.
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 parágrafos estilos.
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, como 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 Text
combinável, use um AnnotatedString
,
uma string que pode ser anotada com 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
é para uso
no elemento combinável Text
, enquanto o SpanStyle
e ParagraphStyle
é para uso em AnnotatedString
. Para mais informações sobre vários estilos em
um parágrafo, consulte Adicionar vários estilos em um parágrafo.
AnnotatedString
tem um tipo seguro
builder
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
usar TextStyle
ou SpanStyle
, agora você também pode usar Brush
.
Usar um pincel para estilizar o texto
Configure o texto usando um pincel integrado no TextStyle
. Por exemplo,
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 ) ) )
![Usar a função "linearGradient" da API Brush com uma lista definida de cores.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=9&hl=pt)
linearGradient
da API Brush com uma lista definida de cores.Você não se limita a esse esquema de cores ou estilo de cores específico.
mostramos um exemplo simples para destacar, use qualquer um dos
pincel ou apenas uma SolidColor
para melhorar o texto.
Integrações
Como você pode usar Brush
com TextStyle
e SpanStyle
,
a integração com o TextField
e o buildAnnotatedString
é perfeita.
Para saber mais sobre como usar a API de pincel em uma 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 o pincel apenas em partes do texto, use
buildAnnotatedString
e a API SpanStyle
com o pincel
e o gradiente de sua escolha.
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.") } )
![Uso de um pincel padrão com linearGradient como estilo para texto.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=9&hl=pt)
linearGradient
como estilo para Text
.Opacidade em um trecho do texto
Para ajustar a opacidade de um determinado período do texto, use o método SpanStyle
parâmetro alpha
opcional. Use o mesmo pincel para
as duas partes de um texto e mudar o parâmetro alfa no período correspondente.
No exemplo de código, o primeiro período do texto é mostrado na meia opacidade
(alpha =.5f
), enquanto o segundo é exibido com 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 ❤️") } }
![Uso do parâmetro alpha de buildAnnotationdString e SpanStyle, junto com linearGradient para adicionar opacidade a um intervalo de texto.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=9&hl=pt)
buildAnnotatedString
e SpanStyle
, além de linearGradient
para adicionar opacidade a um período de texto.Outros recursos
Para mais exemplos de personalização, consulte Como aperfeiçoar o texto do Compose
Postagem do blog sobre coloração (link em inglês). Se você quiser saber mais sobre
como 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
produz um efeito de rolagem animado. O efeito de letreiro ocorrerá se o conteúdo
é grande demais para se adequar às restrições disponíveis. Por padrão, o basicMarquee
tem
algumas configurações (como velocidade e atraso inicial) definidas, mas é possível
modifique 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