Cambia

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.
Figura 1. Il componente Cambia.

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
        }
    )
}
Switch.kt

Se deselezionata, questa implementazione appare come segue:

Un'opzione di base non selezionata.
Figura 2. Un'opzione deselezionata.

Questo è l'aspetto quando viene selezionato:

Un sensore di base selezionato.
Figura 3. Un sensore selezionato.

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
        }
    )
}
Switch.kt

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.
Figura 4. Un sensore con un'icona personalizzata selezionata.

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,
        )
    )
}
Switch.kt

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.
Figura 5. Un sensore con colori personalizzati.

Risorse aggiuntive