Stato attivo in Glimmer di Jetpack Compose

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 →

Tutti i componenti Jetpack Compose Glimmer sono progettati per funzionare con i metodi di input standard, come un tocco o uno scorrimento sul touchpad degli occhiali, ma sono anche ricettivi ai comandi di input di livello inferiore specifici dell'hardware degli occhiali con display. I componenti Jetpack Compose Glimmer gestiscono automaticamente gli eventi di input necessari.

Per le azioni standard come lo scorrimento e il trascinamento, utilizza i componenti Jetpack Compose Glimmer per promuovere un'esperienza coerente. Tuttavia, per i componenti personalizzati o i comportamenti di interazione personalizzati, puoi utilizzare le API Compose esistenti come Modifier.draggable o Modifier.scrollable.

Input del puntatore e stato attivo

Sugli occhiali con display, l'input del puntatore può influire sullo stato attivo:

  • Tocca: interazione diretta per attivare l'elemento. Lo stato attivo si sposta su un elemento quando un utente interagisce con esso.
  • Scorri: utilizzato per la navigazione e lo scorrimento. I gesti di scorrimento non gestiti vengono tradotti automaticamente in movimenti dello stato attivo, consentendo una navigazione UI senza interruzioni senza input diretto del puntatore.

Il movimento e l'ordine dello stato attivo cambiano quando un utente naviga nell'app.

Movimento dello stato attivo

In un container scorrevole, lo stato attivo si sposta continuamente con uno scorrimento sul touchpad. Per gli elementi discreti come una riga di pulsanti, ogni scorrimento sposta lo stato attivo di un elemento alla volta.

Ordine dello stato attivo

Come in Jetpack Compose, Jetpack Compose Glimmer utilizza la ricerca dello stato attivo unidimensionale. Per scoprire di più sull'ordine di attraversamento dello stato attivo, consulta Modificare l'ordine di attraversamento dello stato attivo.

Per modificare l'elemento inizialmente attivo, puoi aggiungere un Modifier.focusGroup() di primo livello e specificare un onEnter focusProperty personalizzato:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

Container di scorrimento

Per un'esperienza utente ottimale, i container di scorrimento come gli elenchi devono essere l'unico componente principale di una schermata. Evita di posizionare un elenco scorrevole direttamente sopra o sotto altri elementi interattivi, come i pulsanti, per evitare confusione nella navigazione e promuovere un movimento dello stato attivo fluido e prevedibile.

Stati attivi predefiniti

Jetpack Compose Glimmer implementa gli stati attivi predefiniti nei suoi componenti interattivi, tra cui superfici, schede ed elementi dell'elenco, promuovendo un feedback visivo coerente e chiaro durante l'interazione dell'utente.

Figura 1. Tre stati attivi in Jetpack Compose Glimmer, che si distinguono utilizzando il feedback visivo basato sul contorno.

  • Predefinito: il colore di sfondo del pulsante è derivato da GlimmerTheme.colors.surface, il contenuto principale calcola il colore del contenuto di quella superficie.

  • Attivo: lo spessore del bordo viene aumentato per comunicare lo stato attivo.

  • Attivo + premuto: lo sfondo è impostato su GlimmerTheme.colors.surface con opacità aumentata per comunicare lo stato selezionato.