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 esses dispositivos →
Óculos de exibição
Saiba mais sobre esses dispositivos →

No Glimmer do Jetpack Compose, um ToggleButton é um componente interativo que muda de aparência com base em um estado marcado. Os botões de ativação são otimizados para óculos de exibição, 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 alternância para expor ações que podem ser ativadas ou desativadas. Ao contrário das alternâncias somente com ícones, um botão de alternância mostra principalmente conteúdo de texto, embora ofereça suporte a slots de ícones opcionais para contexto adicional.

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

Figura 1. Exemplo de um botão de alternância no Glimmer do Jetpack Compose usado para as ações de reprodução e pausa em um layout de interface.

Anatomia

Um botão de alternância consiste em um contêiner que se transforma entre estados e um rótulo com ícones opcionais.

Parte Descrição

Contêiner

Anima entre um formato circular (desmarcado) e um retângulo arredondado (marcado).

Rótulo

Normalmente, um elemento combinável Text.

Ícones (opcional)

Posições iniciais ou finais que podem variar de acordo com o estado.

Tamanhos

Assim como os botões padrão, os botões de alternância 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

Chaves principais ou de alta ênfase.

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

Por padrão, os botões de alternância 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 alternância usam os seguintes padrões para animação:

  • animateShape: fornece um Shape que interpola tamanhos de cantos 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 alternância 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 alternância com ícone principal

O código a seguir cria um botão de alternância com um ícone à esquerda:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}