Divisores são linhas finas que separam itens em listas ou outros contêineres. É possível implementar divisores no seu app usando os elementos combináveis HorizontalDivider
e VerticalDivider.
HorizontalDivider: separa itens em uma coluna.VerticalDivider: separa itens em uma linha.
Superfície da API
Os dois componentes oferecem parâmetros para modificar a aparência:
thickness: use esse parâmetro para especificar a espessura da linha divisória.color: use esse parâmetro para especificar a cor da linha divisória.
Exemplo de divisor horizontal
O exemplo a seguir 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:
Exemplo de divisor vertical
O exemplo a seguir 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:
Outros recursos
HorizontalDividerVerticalDivider- Material Design: divisores (link em inglês)