Divisor

Los divisores son líneas delgadas que separan elementos en listas o en otros contenedores. Puedes implementar divisores en tu app con los elementos componibles HorizontalDivider y VerticalDivider.

Superficie de la API

Ambos componentes proporcionan parámetros para modificar su apariencia:

  • thickness: Usa este parámetro para especificar el grosor de la línea divisoria.
  • color: Usa este parámetro para especificar el color de la línea divisora.

Ejemplo de divisor horizontal

En el siguiente ejemplo, se muestra una implementación del componente HorizontalDivider. Usa el parámetro thickness para controlar la altura de la línea:

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

Esta implementación renderiza una línea horizontal delgada entre dos componentes de texto:

Una pantalla de la app para Android que muestra dos elementos de texto, "Primer elemento de la lista" y "Segundo elemento de la lista", separados por una línea horizontal delgada.
Figura 1: Un divisor horizontal que separa dos componentes de texto.

Ejemplo de divisor vertical

En el siguiente ejemplo, se muestra una implementación del componente VerticalDivider. Usa el parámetro color para proporcionar un color personalizado para la línea:

@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")
    }
}
Divider.kt

Esta implementación renderiza una línea vertical delgada entre dos componentes de texto:

Una pantalla de app para Android que muestra dos elementos de texto, "Primer elemento de la fila" y "Segundo elemento de la fila", separados por una línea vertical delgada.
Figura 2: Un divisor vertical que separa dos componentes de texto.

Recursos adicionales