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

Mudar o tamanho do texto

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

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

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

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

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

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.

Cuidado: o uso atual da API Brush em TextStyle é experimental. As APIs experimentais podem mudar no futuro.

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

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

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

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.