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 dell'interruttore 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.

Figura 1. Il componente Cambia.

Implementazione di base

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

• checked: lo stato iniziale dell'opzione.
• 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 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

Questa implementazione viene visualizzata come segue se non è selezionata:

Figura 2. Uno switch non selezionato.

Questo è l'aspetto quando è selezionata:

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 della miniatura quando è selezionata.
• 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 della casella deselezionata è lo stesso dell'esempio nella sezione precedente. Tuttavia, se selezionata, questa implementazione viene visualizzata come segue:

Figura 4. Un'opzione con un'icona di spunta personalizzata.

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:

Figura 5. Un'opzione con colori personalizzati.

Risorse aggiuntive

• Documentazione di Material UI