Foco no Jetpack Compose Glimmer

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre tipos de dispositivos XR →
Óculos de exibição
Saiba mais sobre tipos de dispositivos XR →

Todos os componentes do Jetpack Compose Glimmer foram projetados para funcionar com métodos de entrada padrão, como um toque ou deslize no touchpad dos óculos, além de serem receptivos a comandos de entrada de nível inferior específicos do hardware dos óculos de exibição. Os componentes do Jetpack Compose Glimmer processam automaticamente os eventos de entrada necessários.

Para ações padrão, como rolagem e arrastar, use os componentes do Jetpack Compose Glimmer para promover uma experiência consistente. No entanto, para componentes personalizados ou comportamentos de interação personalizados, você pode usar APIs do Compose existentes, como Modifier.draggable ou Modifier.scrollable.

Entrada do ponteiro e foco

Nos óculos de exibição, a entrada do ponteiro pode afetar o foco:

  • Toque: interação direta para ativar o elemento. O foco se move para um elemento quando um usuário interage com ele.
  • Deslize: usado para navegação e rolagem. Os gestos de deslize não processados são convertidos automaticamente em movimentos de foco, permitindo a navegação perfeita na interface sem entrada direta do ponteiro.

O movimento e a ordem do foco mudam à medida que um usuário navega pelo app.

Movimento de foco

Em um contêiner rolável, o foco se move continuamente com um deslize no touchpad. Para elementos discretos, como uma linha de botões, cada deslize move o foco um elemento por vez.

Ordem de foco

Assim como no Jetpack Compose, o Jetpack Compose Glimmer usa a pesquisa de foco unidimensional. Para saber mais sobre a ordem de apresentação do foco, consulte Mudar a ordem de apresentação do foco.

Para mudar o item inicialmente focado, adicione um Modifier.focusGroup() e especifique um onEnter focusProperty personalizado:

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

Contêineres de rolagem

Para uma experiência ideal do usuário, os contêineres de rolagem, como listas, precisam ser o único componente principal em uma tela. Evite colocar uma lista rolável diretamente acima ou abaixo de outros elementos interativos, como botões, para evitar confusão na navegação e promover um movimento de foco suave e previsível.

Estados de foco padrão

O Jetpack Compose Glimmer implementa estados de foco padrão em todos os componentes interativos, incluindo superfícies, cards e itens de lista, promovendo feedback visual consistente e claro durante a interação do usuário.

Figura 1. Três estados de foco no Jetpack Compose Glimmer, que são diferenciados usando feedback visual baseado em contorno.

  • Padrão: a cor de segundo plano do botão é derivada de GlimmerTheme.colors.surface, e o conteúdo principal calcula a cor do conteúdo dessa superfície.

  • Focado: a largura da borda é aumentada para comunicar o foco.

  • Focado + pressionado: o plano de fundo é definido como GlimmerTheme.colors.surface com opacidade aumentada para comunicar o estado selecionado.