Switch

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

• Ative ou desative uma configuração.
• Ativar ou desativar um recurso.
• Selecione uma opção.

O componente tem duas partes: o círculo e a faixa. O círculo é a parte arrastável da chave, e a faixa é o plano de fundo. O usuário pode arrastar o círculo para a esquerda ou para a direita para mudar o estado da chave. Eles também podem tocar na chave para conferir e limpar o dispositivo.

Figura 1. O componente da chave.

Implementação básica

Consulte a referência Switch para uma definição completa da API. Veja a seguir alguns dos principais parâmetros que você talvez precise usar:

• checked: o estado inicial da chave.
• onCheckedChange: um callback chamado quando o estado da chave muda.
• enabled: se a chave está ativada ou desativada.
• colors: as cores usadas para a chave.

O exemplo abaixo é 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 forma quando desmarcada:

Figura 2. Uma chave não selecionada.

Quando marcada, esta é a aparência:

Figura 3. Uma chave marcada.

Implementação avançada

Os principais parâmetros que podem ser usados ao implementar uma chave mais avançada são os seguintes:

• thumbContent: use para personalizar a aparência do círculo quando ele estiver marcado.
• colors: use para personalizar a cor da faixa e do círculo.

Miniatura personalizada

Você pode transmitir qualquer elemento combinável ao parâmetro thumbContent para criar um círculo personalizado. Confira a seguir um exemplo de chave que usa um ícone personalizado como círculo:

@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

Nesta implementação, a aparência não marcada é igual ao exemplo na seção anterior. No entanto, quando marcada, essa implementação aparece da seguinte maneira:

Figura 4. Uma chave com um ícone personalizado marcado.

Cores personalizadas

O exemplo a seguir demonstra como usar o parâmetro de cores para mudar a cor do círculo e da faixa de uma chave, considerando se ela está verificada.

@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 forma:

Figura 5. Um interruptor com cores personalizadas.

Outros recursos

• Documentação da interface do Material Design (em inglês)