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.
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:
Esta é a aparência quando marcada:
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:
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:
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)