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.
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 } ) }
Essa implementação aparece da seguinte forma quando desmarcada:
Quando marcada, esta é a aparência:
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 } ) }
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:
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, ) ) }
Essa implementação aparece da seguinte forma:
Outros recursos
- Documentação da interface do Material Design (em inglês)