Estilo de texto

O elemento combinável Text tem vários parâmetros opcionais para definir o estilo do conteúdo. Confira abaixo uma lista dos parâmetros que abrangem os casos de uso mais comuns relacionados a textos. Para todos os parâmetros de Text, consulte o código-fonte do 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ágrafo, consulte a seção sobre vários estilos inline.

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

Mudar o tamanho do texto

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

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

Negritar 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

Adicionar sombra

O parâmetro style permite definir um objeto do tipo TextStyle e configurar vários parâmetros, como uma 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

Adicionar vários estilos no texto

Para definir estilos diferentes no mesmo elemento combinável Text, use uma AnnotatedString, uma string que pode receber anotações de estilo 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.

O TextStyle é usado no elemento combinável Text, ao passo que SpanStyle e ParagraphStyle são usados na 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

Ativar o estilo avançado com Brush

Para ativar estilos de texto mais avançados, use a API Brush com TextStyle e SpanStyle. Em qualquer lugar em que você usaria TextStyle ou SpanStyle, agora também é possível usar Brush.

Usar um pincel para definir o estilo do texto

Configure seu texto usando um pincel integrado em TextStyle. Por exemplo, é possível 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

Você não está limitado a esse esquema de cores ou estilo de coloração. Embora temos fornecido um exemplo simples para destacar, use qualquer um dos pincéis integrados ou até mesmo um 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 mais informações sobre como usar a API Brush em um TextField, consulte Estilo de entrada com a API Brush.

Estilos adicionais usando SpanStyle

Aplicar um pincel a um trecho de texto

Se você quiser aplicar um pincel apenas a partes do texto, use buildAnnotatedString e a API SpanStyle, junto 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

Opacidade em um trecho de texto

Para ajustar a opacidade de um determinado trecho de texto, use o parâmetro opcional alpha de SpanStyle. Use o mesmo pincel para ambas as partes de um texto e mude o parâmetro Alfa no intervalo correspondente. No exemplo de código, o primeiro período de texto é mostrado com metade da opacidade (alpha =.5f), enquanto o segundo é mostrado 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

Outros recursos

Para conferir outros exemplos de personalização, consulte a postagem do blog Como colorir texto no Compose (link em inglês). Se você quiser saber mais sobre como o Brush se integra à nossa API Animations, consulte Animar a coloração de texto com pincéis no Compose.

Aplicar efeito de seleção ao texto

É possível 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, basicMarquee tem certas configurações definidas (como velocidade e atraso inicial), mas você pode modificar esses parâmetros para personalizar o efeito.

O snippet a seguir implementa um efeito de seleção básico em um elemento combinável Text:

@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.