Il componente Switch
consente agli utenti di alternare tra due stati: selezionato
e deselezionata. Nell'app puoi utilizzare un'opzione per consentire all'utente di eseguire una delle
seguenti:
- 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 è l'elemento trascinabile parte del cambio e la traccia è lo sfondo. L'utente può trascinare il pollice a sinistra o a destra per cambiare lo stato dell'opzione. Può anche toccare per controllarla e cancellarla.
![Esempi del componente Cambia in modalità Luce e Buio.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=9&hl=it)
Implementazione di base
Per una definizione completa dell'API, consulta il riferimento di Switch
. Di seguito sono riportate le
alcuni dei parametri chiave che potrebbero essere necessari:
checked
: lo stato iniziale del passaggio.onCheckedChange
: un callback che viene chiamato quando lo stato del cambia le modifiche.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 } ) }
Se deselezionata, questa implementazione appare come segue:
![Un'opzione di base non selezionata.](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=9&hl=it)
Questo è l'aspetto quando viene selezionato:
![Un sensore di base selezionato.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=9&hl=it)
Implementazione avanzata
I parametri principali che potrebbero essere utili durante l'implementazione di una sono le seguenti:
thumbContent
: utilizza questa opzione per personalizzare l'aspetto del pollice quando viene controllato.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 un'immagine
pollice. Di seguito è riportato un esempio di sensore che utilizza un'icona personalizzata per
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 } ) }
In questa implementazione, l'aspetto non selezionato è lo stesso dell'esempio in nella sezione precedente. Tuttavia, se selezionata, questa implementazione viene visualizzata che segue:
![Un'opzione che utilizza il parametro thumbContent per visualizzare un'icona personalizzata quando è selezionata.](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=9&hl=it)
Colori personalizzati
L'esempio seguente mostra come utilizzare il parametro colori per cambiare il colore della pollice e della rotta di un sensore, tenendo presente che sia selezionata.
@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, ) ) }
Questa implementazione si presenta nel seguente modo:
![Un sensore che utilizza il parametro colori per visualizzare un sensore con colori personalizzati sia per la puntina sia per la puntina.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=9&hl=it)