Divisor

Divisores são linhas finas que separam itens em listas ou outros contêineres. Você pode implementar divisores no seu app usando os elementos combináveis HorizontalDivider e VerticalDivider.

Plataforma da API

Os dois componentes fornecem parâmetros para modificar a aparência deles:

  • thickness: use esse parâmetro para especificar a espessura da linha divisor.
  • color: use esse parâmetro para especificar a cor da linha divisória.

Exemplo de divisor horizontal

O exemplo abaixo demonstra uma implementação do componente HorizontalDivider. Ele usa o parâmetro thickness para controlar a altura da linha:

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}

Essa implementação renderiza uma linha horizontal fina entre dois componentes de texto:

A tela de um app Android mostrando dois itens de texto, "Primeiro item na lista" e "Segundo item na lista", separados por uma linha horizontal fina.
Figura 1. Um divisor horizontal separando dois componentes de texto.

Exemplo de divisor vertical

O exemplo abaixo demonstra uma implementação do componente VerticalDivider. Ele usa o parâmetro color para fornecer uma cor personalizada para a linha:

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}

Essa implementação renderiza uma linha vertical fina entre dois componentes de texto:

A tela de um app Android mostrando dois itens de texto, "Primeiro item na linha" e "Segundo item na linha", separados por uma linha vertical fina.
Figura 2. Um divisor vertical que separa dois componentes de texto.

Outros recursos