Botões 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 →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, um Button é um componente interativo otimizado para entrada de óculos com tela virtual, oferecendo feedback visual claro nos estados para orientar as ações do usuário.

Os botões são criados no sistema de superfície do Glimmer do Jetpack Compose, que processa automaticamente propriedades físicas, como bordas e profundidade.

O botão padrão contém um rótulo de texto e ícones opcionais. Ele pode ser usado para ações principais ou secundárias. Há também botões especializados, como botões de ícone e botões de alternância, que são definidos como componentes separados no Glimmer do Jetpack Compose.

Padrão

Grande

Anatomia

Um botão consiste em um contêiner e um rótulo, com ícones opcionais à esquerda e à direita.

Tamanhos

Os botões do Glimmer do Jetpack Compose oferecem suporte a duas variantes de tamanho. Elas afetam a altura mínima e o preenchimento interno.

Estados

Os botões no Glimmer do Jetpack Compose mudam a aparência para comunicar o estado.

• Ativado: o estado padrão de um botão interativo.
• Em foco: quando em foco, o botão aplica um GlimmerTheme.depthEffectLevels.level1 e um destaque de borda.
• Pressionado: quando ativada, uma sobreposição branca semitransparente é aplicada à superfície.
• Desativado: o botão não responde à entrada e a aparência visual é ajustada.

Padrões de botão

Os padrões a seguir se aplicam a botões padrão:

• Por padrão, os botões usam GlimmerTheme.typography.bodySmall. Confira se o texto nos botões é conciso e descreve claramente a ação.
• O formato padrão de um botão é GlimmerTheme.shapes.large. Esse arredondamento consistente ajuda os usuários a identificar botões na interface dos óculos com tela virtual.

Exemplo: botão com texto e ícones

Um botão básico inclui apenas um rótulo de texto, mas também é possível adicionar ícones ao início (usando leadingIcon) ou ao final (usando trailingIcon) do texto para fornecer contexto adicional.

O código a seguir cria um botão com um ícone à esquerda e à direita:

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

Grupos de botões

O elemento combinável ButtonGroup permite agrupar botões em uma linha rolável que funciona como um controlador de foco. À medida que o usuário rola a tela, o foco se move automaticamente para destacar o botão correspondente à posição de rolagem atual.

Exemplo: grupos de botões

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

Controle de foco em grupos de botões

É possível mover o foco para qualquer botão em um grupo para controlar manualmente a seleção.

Personalize e controle o comportamento de rolagem usando o estado ButtonGroup:

1. Declare o estado com rememberButtonGroupState.
2. Transmita-o para o elemento combinável ButtonGroup.
3. Chame animateScrollToItem (ou scrollToItem para rolagem instantânea) para rolar até um item específico e mover o foco automaticamente para ele.

O código a seguir move o foco de um botão para outro ao clicar:

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