Divisore

I divisori sono linee sottili che separano gli elementi in elenchi o in altri containerizzati. Puoi implementare i separatori nella tua app utilizzando i composabili HorizontalDivider e VerticalDivider.

Piattaforma API

Entrambi i componenti forniscono parametri per modificarne l'aspetto:

  • thickness: utilizza questo parametro per specificare lo spessore della linea di separazione.
  • color: utilizza questo parametro per specificare il colore della linea divisoria.

Esempio di divisore orizzontale

L'esempio seguente mostra un'implementazione del componente HorizontalDivider. Usa il parametro thickness per controllare le altezza della linea:

@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

Questa implementazione esegue il rendering di una sottile linea orizzontale tra due componenti di testo:

Una schermata dell'app Android che mostra due elementi di testo, "Primo elemento nell'elenco" e "Secondo elemento nell'elenco", separati da una sottile linea orizzontale.
Figura 1. Un divisore orizzontale che separa due componenti di testo.

Esempio di divisore verticale

L'esempio seguente mostra un'implementazione del componente VerticalDivider. Utilizza il parametro color per fornire una colore per la linea:

@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

Questa implementazione mostra una linea verticale sottile tra due componenti di testo:

Schermata di un'app Android che mostra due elementi di testo, "Primo elemento nella riga" e "Secondo elemento della riga", separate da una sottile linea verticale.
Figura 2. Un divisore verticale che separa due componenti di testo.

Risorse aggiuntive