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.
• Attivare o disattivare una funzionalità.
• Seleziona un'opzione.

Il componente è costituito da due parti: il pollice e la traccia. Il pollice è la parte trascinabile dell'interruttore e la traccia è lo sfondo. L'utente può trascinare il pollice a sinistra o a destra per cambiare lo stato. Possono anche toccare l'opzione per controllarla e cancellarla.

Figura 1. Il componente Cambia.

Implementazione di base

Consulta il riferimento Switch per una definizione completa dell'API. Di seguito sono riportati alcuni dei parametri chiave che potresti dover utilizzare:

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

L'esempio seguente è un'implementazione minima dell'elemento 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. Opzione deselezionata.

Questo è l'aspetto quando viene selezionato:

Figura 3. Opzione selezionata.

Implementazione avanzata

I parametri principali che potresti voler utilizzare quando implementi un passaggio 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 del pollice.

Miniatura personalizzata

Puoi passare qualsiasi componibile per il parametro thumbContent in modo da 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 deselezionato è lo stesso 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 dei colori per modificare il colore della selezione e della traccia di un interruttore, tenendo conto se l'interruttore è stato 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

Questa implementazione si presenta come segue:

Figura 5. Un sensore con colori personalizzati.

Risorse aggiuntive

• Documentazione sull'interfaccia utente di Material