Divisore

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

Superficie API

Entrambi i componenti forniscono parametri per modificare il loro aspetto:

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

Esempio di divisore orizzontale

Il seguente esempio mostra un'implementazione del componente HorizontalDivider. Utilizza il parametro thickness per controllare l'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 per Android che mostra due elementi di testo, "Primo elemento dell'elenco" e "Secondo elemento dell'elenco", separati da una sottile linea orizzontale.
Figura 1. Un divisore orizzontale che separa due componenti di testo.

Esempio di divisore verticale

Il seguente esempio mostra un'implementazione del componente VerticalDivider. Utilizza il parametro color per fornire un colore personalizzato 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 esegue il rendering di una sottile linea verticale tra due componenti di testo:

Una schermata dell'app per Android che mostra due elementi di testo, "Primo elemento della riga" e "Secondo elemento della riga", separati da una sottile linea verticale.
Figura 2. Un divisore verticale che separa due componenti di testo.

Risorse aggiuntive