Pulsanti 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 →

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, un Button è un componente interattivo ottimizzato per l'input degli occhiali con display, che offre un feedback visivo chiaro attraverso i suoi stati per guidare le azioni dell'utente.

I pulsanti sono basati sul sistema di superfici Jetpack Compose Glimmer, che gestisce automaticamente le proprietà fisiche come bordi e profondità.

Il pulsante standard contiene un'etichetta di testo e icone facoltative. Puoi utilizzarlo per azioni principali o secondarie. Esistono anche pulsanti specializzati, come i pulsanti con icone e i pulsanti di attivazione/disattivazione, definiti come componenti separati in Jetpack Compose Glimmer.

Predefinito

Grande

Anatomia

Un pulsante è composto da un container e un'etichetta, con icone iniziali e finali facoltative.

Dimensioni

I pulsanti Jetpack Compose Glimmer supportano due varianti di dimensioni. Queste influiscono sull'altezza minima e sul padding interno.

Stati

I pulsanti in Jetpack Compose Glimmer modificano il loro aspetto per comunicare il loro stato.

• Attivo: lo stato predefinito per un pulsante interattivo.
• Selezionato: quando è selezionato, il pulsante applica un GlimmerTheme.depthEffectLevels.level1 e un bordo di evidenziazione.
• Premuto: quando viene attivato, alla superficie viene applicata una sovrapposizione bianca semitrasparente a lla superficie.
• Disattivato: il pulsante non risponde all'input e il suo aspetto visivo viene modificato.

Valori predefiniti dei pulsanti

I seguenti valori predefiniti si applicano ai pulsanti standard:

• Per impostazione predefinita, i pulsanti utilizzano GlimmerTheme.typography.bodySmall. Assicurati che il testo all'interno dei pulsanti sia conciso e descriva chiaramente l'azione.
• La forma predefinita per un pulsante è GlimmerTheme.shapes.large. Questa arrotondamento coerente aiuta gli utenti a identificare i pulsanti nell'interfaccia degli occhiali con display.

Esempio: pulsante con testo

Il seguente codice crea un pulsante standard con testo:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

Esempio: pulsanti con icone iniziali e finali

Puoi anche aggiungere icone all'inizio (utilizzando leadingIcon) o alla fine (utilizzando trailingIcon) del testo per fornire un contesto aggiuntivo.

Il seguente codice crea un pulsante con un'icona iniziale:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt