Cambia

Il componente Switch consente agli utenti di alternare tra due stati: 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.
• Attivazione o disattivazione di una funzionalità.
• Seleziona un'opzione.

Il componente è composto da due parti: la miniatura e la traccia. Il cursore è la parte dell'opzione scorrevole 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.

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:

Figura 2. Uno switch non selezionato.

Questo è l'aspetto quando viene selezionato:

Figura 3. Un'opzione selezionata.

Implementazione avanzata

I parametri principali che ti consigliamo di utilizzare quando implementi uno switch più avanzato 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 un interruttore 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 non selezionato è lo stesso dell'esempio nella sezione precedente. Tuttavia, se selezionata, questa implementazione appare come segue:

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:

Figura 5. Un'opzione con colori personalizzati.

Risorse aggiuntive

• Documentazione di Material UI