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 tramite 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 è costituito 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'evidenziazione del bordo selezionato.
• 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 e icone

Un pulsante di base include solo un'etichetta di testo, ma 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 e una finale:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Gruppi di pulsanti

Il componibile ButtonGroup consente di raggruppare i pulsanti in una riga scorrevole che funge da controller di selezione. Man mano che l'utente scorre, la selezione si sposta automaticamente per evidenziare il pulsante corrispondente alla posizione di scorrimento corrente.

Esempio: gruppi di pulsanti

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Controllo della selezione nei gruppi di pulsanti

Puoi spostare la selezione su qualsiasi pulsante di un gruppo per controllare manualmente la selezione.

Personalizza e controlla il comportamento di scorrimento utilizzando lo stato ButtonGroup:

1. Dichiara lo stato con rememberButtonGroupState.
2. Passalo al componibile ButtonGroup.
3. Chiama animateScrollToItem (o scrollToItem per lo scorrimento immediato ) per scorrere fino a un elemento specifico e spostare automaticamente la selezione su di esso.

Il seguente codice sposta la selezione da un pulsante all'altro quando fai clic:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt