Estilo de texto

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)
}
TextSnippets.kt

As palavras

Mudar o tamanho do texto

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

As palavras

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)
}
TextSnippets.kt

As palavras

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)
}
TextSnippets.kt

As palavras

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
            )
        )
    )
}
TextSnippets.kt

As palavras

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 de SpanStyleRange, equivalente ao estilo inline com intervalo de posições dentro do valor de texto
  • uma List de ParagraphStyleRange, 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")
        }
    )
}
TextSnippets.kt

As palavras

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
        )
    )
)
TextSnippets.kt

Usar a função "linearGradient" da API Brush com uma lista definida de cores.
Figura 2. Usar a função 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.")
    }
)
TextSnippets.kt

Uso de um pincel padrão com linearGradient como estilo para texto.
Figura 4. Usando um pincel padrão com 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 ❤️")
    }
}
TextSnippets.kt

Uso do parâmetro alpha de buildAnnotationdString e SpanStyle, junto com linearGradient para adicionar opacidade a um intervalo de texto.
Figura 5. Uso do parâmetro Alfa de 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
        )
    }
}
TextSnippets.kt

Figura 6. Modificador basicMarquee aplicado ao texto.