Switch

O Switch componente permite que os usuários alternem entre dois estados: marcado e desmarcado. No app, você pode usar um botão para permitir que o usuário faça uma das seguintes ações:

  • Ativar ou desativar uma configuração.
  • Ativar ou desativar um recurso.
  • Selecionar uma opção.

O componente tem duas partes: o controle deslizante e a faixa. O controle deslizante é a parte arrastável do botão, e a faixa é o plano de fundo. O usuário pode arrastar o controle deslizante para a esquerda ou para a direita para mudar o estado do botão. Ele também pode tocar no botão para marcar e desmarcar.

Exemplos do componente Switch nos modos claro e escuro.
Figura 1. O componente de botão.

Implementação básica

Consulte a referência Switch para uma definição completa da API. Confira alguns dos principais parâmetros que você pode precisar usar:

  • checked: o estado inicial do botão.
  • onCheckedChange: um callback que é chamado quando o estado do botão muda.
  • enabled: se o botão está ativado ou desativado.
  • colors: as cores usadas para o botão.

O exemplo a seguir é uma implementação mínima do elemento combinável Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Essa implementação aparece da seguinte maneira quando desmarcada:

Um interruptor básico desmarcado.
Figura 2. Um botão desmarcado.

Esta é a aparência quando marcada:

Um Switch básico marcado.
Figura 3. Um botão marcado.

Implementação avançada

Os principais parâmetros que você pode usar ao implementar um botão mais avançado são os seguintes:

  • thumbContent: use esse parâmetro para personalizar a aparência do controle deslizante quando ele estiver marcado.
  • colors: use esse parâmetro para personalizar a cor da faixa e do controle deslizante.

Controle deslizante personalizado

Você pode transmitir qualquer elemento combinável para o parâmetro thumbContent para criar um controle deslizante personalizado. Confira a seguir um exemplo de botão que usa um ícone personalizado para o controle deslizante:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

Nessa implementação, a aparência desmarcada é a mesma do exemplo na seção anterior. No entanto, quando marcada, essa implementação aparece da seguinte maneira:

Um botão de alternância que usa o parâmetro thumbContent para mostrar um ícone personalizado quando marcado.
Figura 4. Um botão com um ícone marcado personalizado.

Cores personalizadas

O exemplo a seguir demonstra como usar o parâmetro de cores para mudar a cor do controle deslizante e da faixa de um botão, considerando se o botão está marcado.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

Essa implementação aparece da seguinte maneira:

Um botão de alternância que usa o parâmetro "colors" para mostrar um botão com cores personalizadas para o botão e a faixa.
Figura 5. Um botão com cores personalizadas.

Outros recursos