Componente Text no Jetpack Compose

14 de abril de 2022

Jetpack Compose

Rodrigo Leutz

Componente Text no Jetpack Compose é o componente equivalente ao TextView no xml na programação para Android.

Neste tutorial será visto o básico sobre o componente Text do Jetpack Compose e seus parâmetros mais utilizados.

Para uma explicação bem detalhada do uso do componente acesse o link.

Primeiramente o projeto base é o criar um projeto Jetpack Compose para vermos um pouco do componente vamos ao código para explicar um pouco dele.

Componente Text no Jetpack Compose

Cria se então um arquivo kotlin para o Text com a função ComponentText contendo apenas o componente para observar as funcionalidades básicas dele.

Segue abaixo o código criado para testar o componente.

package br.com.uware.novoprojetojetpackcompose.components


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp


/**
 * ComponentText
 * Equivalente ao TextView do xml.
 * @author Rodrigo Leutz
 */
@Composable
fun ComponentText(){
    Text(
        text = "Olá Mundo!",
        color = Color.Green,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        style = MaterialTheme.typography.h6,
        modifier = Modifier.background(Color.LightGray).padding(16.dp)
    )
}

@Preview(showBackground = true)
@Composable
fun ComponentTextPreview(){
    ComponentText()
}

Observando assim o componente Text você pode notar que tem alguns parâmetros, esses não são todos os parâmetros que a funcão suporta, são os mais utilizados.

O único parâmetro desta função que é obrigatório é o parâmetro text, os demais são opcionais.

Vamos então explicar um pouco dos parâmetros:

text = Texto que irá aparecer.
color = Cor do texto.
fontWeight = Peso do texto(negrito, extra negrito, normal)
fontFamily = Tipo de fonte do texto.
style = Estilo do texto, muito utilizado do MaterialTheme.typography com pré configurações.
modifier = É o parâmetro que existe em todos componentes do Jetpack Compose, sendo o parâmetro mais usado para customizar, exige a ordem dos parâmetros Modifier.

Portanto o código do texto mostrado é igual ao da seguinte imagem.

Imagem do código com background antes do padding.

Logo após ver esta imagem resolvi mostrar como ela ficaria se fosse modificada a ordem dos modifiers na função.

Então com o código igual ao seguinte veja que foi modificado a ordem e veja a diferença.

/**
 * ComponentText
 * Equivalente ao TextView do xml.
 * @author Rodrigo Leutz
 */
@Composable
fun ComponentText(){
    Text(
        text = "Olá Mundo!",
        color = Color.Green,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Cursive,
        style = MaterialTheme.typography.h6,
        modifier = Modifier.padding(16.dp).background(Color.LightGray)
    )
}

Veja que foi apenas modificado a ordem dos fatores de modifier e observe na imagem a seguir como ficaria o texto.