Cambia

Il componente Switch consente agli utenti di passare da uno stato all'altro: selezionato e deselezionato. Nella tua app puoi utilizzare un'opzione 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: la miniatura e la traccia. Il cursore è la parte dell'opzione che puoi trascinare e il canale è lo sfondo. L'utente può trascinare il cursore verso sinistra o verso destra per modificare lo stato dell'opzione. Possono anche toccare l'opzione per selezionarla e deselezionarla.

Esempi del componente Switch sia in modalità Luce che Buio.
Figura 1. Il componente di opzione.

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 cambia lo stato dell'opzione.
  • enabled: indica se l'opzione è attivata o disattivata.
  • colors: i colori utilizzati per l'opzione.

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

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

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

Questa implementazione viene visualizzata come segue se non è selezionata:

Un'opzione di base non selezionata.
Figura 2. Uno switch non selezionato.

Questo è l'aspetto quando è selezionata:

Un'opzione di base selezionata.
Figura 3. Un'opzione selezionata.

Implementazione avanzata

I parametri principali che potresti utilizzare per implementare un'opzione più avanzata sono i seguenti:

  • thumbContent: utilizza questa opzione per personalizzare l'aspetto della miniatura quando è selezionata.
  • colors: utilizza questo parametro per personalizzare il colore della traccia e della miniatura.

Icona personalizzata

Puoi passare qualsiasi composable per il parametro thumbContent per creare un'anteprima personalizzata. Di seguito è riportato un esempio di opzione che utilizza un'icona personalizzata per l'anteprima:

@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'opzione che utilizza il parametro thumbContent per visualizzare un'icona personalizzata quando è selezionata.
Figura 4. Un'opzione con un'icona di spunta personalizzata.

Colori personalizzati

Il seguente esempio mostra come utilizzare il parametro colors per cambiare il colore del cursore e del riquadro di un'opzione, tenendo conto dell'eventuale attivazione dell'opzione.

@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 è visualizzata come segue:

Un'opzione che utilizza il parametro colors per visualizzare un'opzione con colori personalizzati sia per il cursore che per il cursore fisso.
Figura 5. Un'opzione con colori personalizzati.

Risorse aggiuntive