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.

• HorizontalDivider: Separa los elementos en una columna.
• VerticalDivider: Separa los elementos en una fila.

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:

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:

Recursos adicionales

• HorizontalDivider
• VerticalDivider
• Material Design: Divisores