Cambia

Il componente Switch consente agli utenti di alternare due stati: selezionato e non selezionato. Nella tua app puoi utilizzare un interruttore per consentire all'utente di eseguire una delle seguenti operazioni:

  • Attivare o disattivare un'impostazione.
  • Attivare o disattivare una funzionalità.
  • Selezionare un'opzione.

Il componente è composto da due parti: il cursore e la traccia. Il cursore è la parte trascinabile dell'interruttore, mentre la traccia è lo sfondo. L'utente può trascinare il cursore a sinistra o a destra per modificare lo stato dell'interruttore. Può anche toccare l'interruttore per selezionarlo e deselezionarlo.

Esempi del componente Interruttore in modalità Luce e Buio.
Figura 1. Il componente dell'interruttore.

Implementazione di base

Per una definizione completa dell'API, consulta il riferimento Switch. Di seguito sono riportati alcuni dei parametri chiave che potresti dover utilizzare:

  • checked: lo stato iniziale dell'interruttore.
  • onCheckedChange: un callback chiamato quando lo stato dell'interruttore cambia.
  • enabled: indica se l'interruttore è attivo o disattivo.
  • colors: i colori utilizzati per l'interruttore.

L'esempio seguente è un'implementazione minima del composable Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

Ecco come appare questa implementazione quando non è selezionata:

Un interruttore di base deselezionato.
Figura 2. Un interruttore non selezionato.

Ecco come appare quando è selezionato:

Un interruttore di base selezionato.
Figura 3. Un interruttore selezionato.

Implementazione avanzata

I parametri principali che potresti voler utilizzare quando implementi un interruttore più avanzato sono i seguenti:

  • thumbContent: utilizzalo per personalizzare l'aspetto del cursore quando è selezionato.
  • colors: utilizzalo per personalizzare il colore della traccia e del cursore.

Cursore personalizzato

Puoi passare qualsiasi composable per il parametro thumbContent per creare un cursore personalizzato. Di seguito è riportato un esempio di interruttore che utilizza un'icona personalizzata per il cursore:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}

In questa implementazione, l'aspetto non selezionato è lo stesso dell'esempio nella sezione precedente. Tuttavia, quando è selezionata, questa implementazione appare come segue:

Un interruttore che utilizza il parametro thumbContent per visualizzare un'icona personalizzata quando è selezionato.
Figura 4. Un interruttore con un'icona selezionata personalizzata.

Colori personalizzati

L'esempio seguente mostra come utilizzare il parametro colors per modificare il colore del cursore e della traccia di un interruttore, tenendo conto del fatto che l'interruttore sia selezionato o meno.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}

Ecco come appare questa implementazione:

Un interruttore che utilizza il parametro colors per visualizzare un interruttore con colori personalizzati sia per il cursore che per la traccia.
Figura 5. Un interruttore con colori personalizzati.

Risorse aggiuntive