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

No Glimmer do Jetpack Compose, o componente Button é interativo e otimizado para entrada de óculos de IA, oferecendo feedback visual claro para os estados ativado, pairado e pressionado, orientando as ações do usuário.

Figura 1. Um exemplo de alguns estilos diferentes de botões no Glimmer do Jetpack Compose.

Exemplo: variações de botão

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

Pontos principais sobre o código

  • Os ícones de botão usam drawables vetoriais XML locais (R.drawable.ic_favorite) usando painterResource, substituindo a dependência da biblioteca Icons.Default para carregamento otimizado de recursos.
  • Os parâmetros leadingIcon e trailingIcon são usados para injetar elementos combináveis de ícones no layout do botão, demonstrando o suporte do Glimmer do Jetpack Compose para posicionamento flexível de ícones.
  • Os botões usam a configuração de dimensionamento padrão, que gerencia automaticamente o padding interno e o escalonamento de texto para se alinhar às especificações de design padrão do Glimmer do Jetpack Compose sem modificadores de tamanho explícitos.