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 relacionados a texto. Para ver todos os parâmetros de Text, consulte o código-fonte do Compose Text.

Sempre que você definir um desses parâmetros, o mesmo estilo será aplicado a todo o valor do texto. Caso precise aplicar vários estilos na mesma linha ou parágrafos, consulte a seção sobre vários estilos in-line.

Estilos de texto comuns

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

Deixar o texto em itálico

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

Deixar o texto em negrito

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 ao texto

Para definir estilos diferentes no mesmo elemento combinável Text, 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 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.

A 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")
        }
    )
}
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 usa TextStyle ou SpanStyle, agora também é possível usar Brush.

Usar um pincel para definir o estilo do texto

Configure o texto usando um pincel integrado no TextStyle. Por exemplo, você pode configurar um pincel linearGradient para o 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. Usando a função linearGradient da API Brush com uma lista definida de cores.

Você não está limitado a esse esquema de cores ou estilo de cor específico. Fornecemos um exemplo simples para destacar, mas use qualquer um dos pincéis integrados ou apenas um SolidColor para melhorar o texto.

Integrações

Como você pode usar Brush com TextStyle e SpanStyle, a integração com TextField e buildAnnotatedString é perfeita.

Para mais informações sobre como usar a API Pincel em uma TextField, consulte Entrada de estilo com a API Brush.

Mais estilo usando SpanStyle.

Aplicar um pincel em um texto

Se você quiser aplicar um pincel apenas em partes do texto, use buildAnnotatedString e a API SpanStyle, junto com o pincel e o gradiente que preferir.

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

Usar um pincel padrão com linearGradient como estilo para Text.
Figura 4. Usando um pincel padrão com linearGradient como um estilo para Text.
Opacidade em um intervalo de texto

Para ajustar a opacidade de um intervalo específico de texto, use o parâmetro alpha opcional da SpanStyle. Use o mesmo pincel para as duas partes do texto e mude o parâmetro Alfa no período correspondente. No exemplo de código, o primeiro intervalo de texto é exibido com 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 alfa de buildannotatedString e SpanStyle, junto com linearGradient para adicionar opacidade a um período de texto
Figura 5. Uso do parâmetro Alfa de buildAnnotatedString e SpanStyle, junto com linearGradient, para adicionar opacidade a um período do texto.

Outros recursos

Para conferir mais exemplos de personalização, consulte a postagem do blog Como aplicar as cores de texto no Compose (em inglês). Se quiser saber mais sobre como Brush se integra à nossa API Animations, consulte Animar a coloração de texto de 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 amplo para caber nas restrições disponíveis. Por padrão, basicMarquee tem algumas configurações definidas (como velocidade e atraso inicial), mas você pode modificar esses parâmetros para personalizar o efeito.

O snippet abaixo 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. O modificador basicMarquee aplicado ao texto.