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 pollice e la traccia. Il pollice è la parte trascinabile del sensore, mentre la traccia è lo sfondo. L'utente può trascinare il pollice verso sinistra o destra per cambiare lo stato del passaggio. Possono anche toccare l'opzione per controllarla e cancellarla.

Figura 1. Il componente Cambia.

Implementazione di base

Per una definizione completa dell'API, consulta il riferimento di Switch. Di seguito sono riportati alcuni dei parametri chiave che potrebbero essere necessari:

• checked: lo stato iniziale del passaggio.
• onCheckedChange: un callback che viene chiamato quando lo stato del sensore cambia.
• enabled: indica se l'opzione è attivata o disattivata.
• colors: i colori utilizzati per il sensore.

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

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

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

Se deselezionata, questa implementazione appare come segue:

Figura 2. Un'opzione deselezionata.

Questo è l'aspetto quando viene selezionato:

Figura 3. Un sensore selezionato.

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 del pollice quando è selezionato.
• colors: utilizza questa opzione per personalizzare il colore della traccia e della pollice.

Pollice personalizzata

Puoi passare qualsiasi elemento componibile per il parametro thumbContent al fine di creare una miniatura personalizzata. Di seguito è riportato un esempio di sensore che utilizza un'icona personalizzata per il pollice:

@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 è uguale a quello dell'esempio nella sezione precedente. Tuttavia, se selezionata, questa implementazione appare come segue:

Figura 4. Un sensore con un'icona personalizzata selezionata.

Colori personalizzati

L'esempio seguente mostra come utilizzare il parametro colors per modificare il colore della pollice e della rotta di un sensore, tenendo conto della selezione o meno del sensore.

@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 si presenta nel seguente modo:

Figura 5. Un sensore con colori personalizzati.

Risorse aggiuntive

• Documentazione sull'interfaccia utente Material