Cambia

Il componente Switch consente agli utenti di passare da uno stato all'altro: selezionato e non selezionato. Nella tua app puoi utilizzare un pulsante di attivazione/disattivazione per consentire all'utente di eseguire una delle seguenti operazioni:

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

Il componente è composto da due parti: il cursore e la barra. 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'opzione. Possono anche toccare l'interruttore per controllare e cancellare la cronologia.

Figura 1. Il componente Switch.

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 che viene chiamato quando lo stato dell'opzione cambia.
• enabled: indica se l'opzione è attiva 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

Ecco come appare l'implementazione quando non è selezionata:

Figura 2. Un'opzione non selezionata.

Questo è l'aspetto quando viene selezionato:

Figura 3. Un interruttore selezionato.

Implementazione avanzata

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

• thumbContent: utilizza questo attributo per personalizzare l'aspetto del cursore quando è selezionato.
• colors: utilizza questo attributo per personalizzare il colore della barra e del cursore.

Miniatura personalizzata

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

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    painter = rememberVectorPainter(AppIcons.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, l'implementazione appare come segue:

Figura 4. Un'icona di controllo 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 se l'interruttore è selezionato.

@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

Ecco come appare la barra:

Figura 5. Un interruttore con colori personalizzati.

Risorse aggiuntive

• Documentazione di Material UI