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

No Jetpack Compose Glimmer, um ToggleButton é um componente interativo que muda de aparência com base em um estado marcado. Os botões ativar/desativar são otimizados para óculos com tela virtual, oferecendo transições visuais claras em forma e cor. Essas transições indicam quando uma ação ou configuração está ativa.

Use botões de ativação para expor ações que podem ser ativadas ou desativadas. Ao contrário dos botões de ativação somente com ícones, um botão de ativação mostra principalmente conteúdo de texto, embora ofereça suporte a slots de ícones opcionais para mais contexto.

Para outros casos de uso, também há botões padrão e botões de ícone.

Figura 1. Um exemplo de um botão de ativação no Jetpack Compose Glimmer usado para as ações de reprodução e pausa em um layout de interface.

Anatomia

Um botão de ativação consiste em um contêiner que se transforma entre estados e um marcador com ícones opcionais.

Parte Descrição

Contêiner

Anima entre uma forma circular (desmarcada) e um retângulo arredondado (marcado).

Marcador

Normalmente, um elemento combinável Text.

Ícones (opcional)

Slots iniciais ou finais que podem variar com base no estado.

Tamanhos

Assim como os botões padrão, os botões de ativação oferecem suporte a duas variantes de tamanho:

Tamanho Altura mínima Uso padrão

Médio

48.dp

Tamanho interativo padrão.

Grande

72.dp

Botões de ativação principais ou de alta ênfase.

Padrões de botões de ativação

Por padrão, os botões de ativação usam ToggleButtonDefaults.animateShape. Isso cria uma transição suave entre os seguintes estados:

A classe ToggleButtonColors gerencia a resolução de cores para os seguintes estados:

Animação

Os botões de ativação usam os seguintes padrões para animação:

  • animateShape: fornece um Shape que interpola tamanhos de canto usando uma especificação de animação de mola (stiffness = 600f).
  • colors: uma função de fábrica para personalizar as cores de plano de fundo e conteúdo para os dois estados.
  • CheckedShape: um RoundedCornerShape(20.dp) estático usado para o estado marcado.
  • contentPadding: herda de ButtonDefaults.contentPadding.

Exemplo: botão de ativação

O código a seguir cria um botão de ativação básico:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}

Exemplo: botão de ativação com ícone inicial

O código a seguir cria um botão de ativação com um ícone inicial:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}