Pulsanti di attivazione/disattivazione in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Occhiali con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, un ToggleButton è un componente interattivo che cambia aspetto in base a uno stato selezionato. I pulsanti di attivazione/disattivazione sono ottimizzati per gli occhiali con display per fornire transizioni visive chiare nella forma e nel colore. Queste transizioni indicano quando un'azione o un'impostazione è attiva.

Utilizza i pulsanti di attivazione/disattivazione per esporre le azioni che possono essere attivate o disattivate. A differenza dei pulsanti di attivazione/disattivazione solo con icone, un pulsante di attivazione/disattivazione mostra principalmente contenuti di testo, anche se supporta slot di icone facoltativi per un contesto aggiuntivo.

Per altri casi d'uso, sono disponibili anche pulsanti standard e pulsanti icona.

Figura 1. Un esempio di pulsante di attivazione/disattivazione in Jetpack Compose Glimmer utilizzato per le azioni di riproduzione e pausa in un layout dell'interfaccia utente.

Anatomia

Un pulsante di attivazione/disattivazione è costituito da un container che si trasforma tra gli stati e da un'etichetta con icone facoltative.

Parte Descrizione

Container

Anima tra una forma circolare (non selezionata) e un rettangolo arrotondato (selezionato).

Etichetta

In genere un Text composable.

Icone (facoltative)

Slot iniziali o finali che possono variare in base allo stato.

Dimensioni

Come i pulsanti standard, i pulsanti di attivazione/disattivazione supportano due varianti di dimensioni:

Dimensioni Altezza minima Utilizzo predefinito

Media

48.dp

Dimensioni interattive predefinite.

Grande

72.dp

Pulsanti di attivazione/disattivazione principali o ad alta enfasi.

Valori predefiniti dei pulsanti di attivazione/disattivazione

Per impostazione predefinita, i pulsanti di attivazione/disattivazione utilizzano ToggleButtonDefaults.animateShape. In questo modo viene creata una transizione fluida tra i seguenti stati:

La classe ToggleButtonColors gestisce la risoluzione dei colori per i seguenti stati:

Animazione

I pulsanti di attivazione/disattivazione utilizzano i seguenti valori predefiniti per l'animazione:

  • animateShape: fornisce un Shape che interpola le dimensioni degli angoli utilizzando una specifica di animazione con effetto molla (stiffness = 600f).
  • colors: una funzione di fabbrica per personalizzare i colori di sfondo e dei contenuti per entrambi gli stati.
  • CheckedShape: un RoundedCornerShape(20.dp) statico utilizzato per lo stato selezionato.
  • contentPadding: eredita da ButtonDefaults.contentPadding.

Esempio: pulsante di attivazione/disattivazione

Il seguente codice crea un pulsante di attivazione/disattivazione di base:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}

Esempio: pulsante di attivazione/disattivazione con icona iniziale

Il seguente codice crea un pulsante di attivazione/disattivazione con un'icona iniziale:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}