Cambia

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

  • Attiva o disattiva un'impostazione.
  • Attiva o disattiva una funzionalità.
  • Seleziona un'opzione.

Il componente è composto da due parti: il cursore e la traccia. Il cursore è la parte trascinabile dell'interruttore e la traccia è lo sfondo. L'utente può trascinare il cursore a sinistra o a destra per cambiare lo stato dell'interruttore. Possono anche toccare l'interruttore per controllare e cancellare la cronologia.

Esempi del componente Interruttore in modalità Luce e Buio.
Figura 1. Il componente 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'opzione.
  • onCheckedChange: un callback chiamato quando lo stato dell'interruttore cambia.
  • enabled: indica se l'opzione è attivata o disattivata.
  • colors: i colori utilizzati per l'interruttore.

Il seguente esempio è un'implementazione minima del componente componibile Switch.

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

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

Questa implementazione viene visualizzata come segue quando non è selezionata:

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

Questo è l'aspetto quando è selezionata:

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

Implementazione avanzata

I parametri principali che potresti voler utilizzare quando implementi un'opzione più avanzata sono i seguenti:

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

Miniatura personalizzata

Puoi passare qualsiasi composable per il parametro thumbContent per creare una miniatura personalizzata. 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
        }
    )
}
Switch.kt

In questa implementazione, l'aspetto della casella deselezionata è lo stesso dell'esempio nella sezione precedente. Tuttavia, se selezionata, questa implementazione viene visualizzata come segue:

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

Colori personalizzati

Il seguente esempio 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,
        )
    )
}
Switch.kt

Questa implementazione viene visualizzata nel seguente modo:

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