O componente Switch
permite que os usuários alternem entre dois estados: marcado
e desmarcado. No seu app, você pode usar uma chave para permitir que o usuário:
- 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 polegar é a parte arrastável da chave e a faixa é o segundo plano. O usuário pode arrastar o polegar para a esquerda ou direita para mudar o estado da chave. Eles também podem tocar na chave para verificar e limpar.
![Exemplos do componente Switch no modo claro e escuro.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=3&hl=pt-br)
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 talvez você 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 na 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 } ) }
Quando desmarcada, esta implementação aparece da seguinte maneira:
![Uma chave básica que está desmarcada.](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=3&hl=pt-br)
Esta é a aparência quando marcada:
![Um switch básico marcado.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=3&hl=pt-br)
Implementação avançada
Os principais parâmetros que você pode querer usar ao implementar um switch mais avançado são os seguintes:
thumbContent
: use para personalizar a aparência do círculo quando ela estiver marcada.colors
: use esta opção para personalizar a cor da faixa e do círculo.
Personalizar miniatura
É possível transmitir qualquer elemento combinável ao parâmetro thumbContent
para criar uma miniatura
personalizada. Este é um exemplo de um interruptor que usa um ícone personalizado para o
polegar:
@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 selecionada é igual ao exemplo na seção anterior. No entanto, quando marcada, essa implementação aparece desta maneira:
![Uma chave que usa o parâmetro thumbContent para exibir um ícone personalizado quando marcada.](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=3&hl=pt-br)
Cores personalizadas
O exemplo a seguir demonstra como usar o parâmetro de cores para mudar a cor do polegar e da faixa de um interruptor, considerando se ele 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, ) ) }
Essa implementação aparece da seguinte maneira:
![Um interruptor que usa o parâmetro de cores para exibir um interruptor com cores personalizadas para o polegar e a manga.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=3&hl=pt-br)
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)