O componente Switch
permite que os usuários alternem entre dois estados: marcado.
e desmarcada. No seu aplicativo, você pode usar uma chave para permitir que o usuário realize uma das
seguintes:
- 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 é o elemento arrastável e a faixa fica em segundo plano. O usuário pode arrastar o polegar para a esquerda ou direita para alterar o estado da chave. Eles também podem tocar mude para verificar e limpar.
![Exemplos do componente Switch no modo claro e escuro.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switches.png?authuser=4&hl=pt)
Implementação básica
Consulte a referência Switch
para uma definição completa da API. Os itens a seguir são
alguns dos principais parâmetros que talvez você precise usar:
checked
: o estado inicial da chave.onCheckedChange
: um callback chamado quando o estado da mudanças no interruptor.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.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=4&hl=pt)
Esta é a aparência quando marcada:
![Um switch básico marcado.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?authuser=4&hl=pt)
Implementação avançada
Os parâmetros principais que você pode querer usar ao implementar um modelo mais avançado são os seguintes:
thumbContent
: use esse recurso para personalizar a aparência da miniatura ao se 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 um personalizado.
o polegar. Este é um exemplo de um interruptor que usa um ícone personalizado para o
miniatura:
@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 em na seção anterior. No entanto, quando marcada, essa implementação aparece como da seguinte forma:
![Uma chave que usa o parâmetro thumbContent para exibir um ícone personalizado quando marcada.](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?authuser=4&hl=pt)
Cores personalizadas
O exemplo a seguir demonstra como você pode usar o parâmetro cores para alterar a cor do polegar e da faixa de um interruptor, considerando se 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, ) ) }
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.google.cn/static/develop/ui/compose/images/components/switch-colors.png?authuser=4&hl=pt)
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)