Foco no Jetpack Compose Glimmer

Dispositivos XR aplicáveis
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos de XR.
Saiba mais sobre os tipos de dispositivos XR →
Óculos de IA
Saiba mais sobre os tipos de dispositivos XR →

Todos os componentes do Glimmer do Jetpack Compose foram projetados para funcionar com métodos de entrada padrão, como um toque ou deslizar no touchpad dos óculos de IA, além de serem receptivos a comandos de entrada de nível inferior específicos para hardware de óculos de IA. Os componentes Glimmer do Jetpack Compose processam automaticamente os eventos de entrada necessários. Para componentes personalizados, use APIs do Compose atuais, como Modifier.draggable ou Modifier.scrollable, para implementar comportamentos de interação específicos.

Em óculos de IA com tela, a entrada de ponteiro pode afetar o foco:

  • Toque: interação direta para ativar o elemento. O foco muda para um elemento quando um usuário interage com ele.
  • Deslizar: usado para navegação e rolagem. Gestos de deslizar não processados são traduzidos automaticamente em movimentos de foco, permitindo uma navegação perfeita na interface sem entrada direta do ponteiro.

Mova o foco e mude a ordem conforme o usuário navega pelo app.

Movimento de foco

Em um contêiner rolável, o foco se move continuamente com um deslizar 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 em foco, adicione um Modifier.focusGroup() de nível superior e especifique um onEnter focusProperty personalizado:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Contêineres de rolagem

Para uma experiência ideal do usuário, os contêineres de rolagem, como listas, devem 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 Glimmer do Jetpack Compose 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 Glimmer do Jetpack Compose, que são diferenciados usando feedback visual baseado em contorno.

  • Padrão: a cor de fundo do botão é derivada de GlimmerTheme.colors.surface, o conteúdo principal calcula a cor do conteúdo dessa superfície, e os ícones são GlimmerTheme.colors.primary.

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

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