Switch

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 seguinte:

  • 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.
Figura 1. O componente do switch.

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
        }
    )
}
Switch.kt

Quando desmarcada, esta implementação aparece da seguinte maneira:

Uma chave básica que está desmarcada.
Figura 2. Uma chave desmarcada.

Esta é a aparência quando marcada:

Um switch básico marcado.
Figura 3. Uma chave marcada.

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
        }
    )
}
Switch.kt

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.
Figura 4. Um interruptor com um ícone personalizado marcado.

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,
        )
    )
}
Switch.kt

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.
Figura 5. Um interruptor com cores personalizadas.

Outros recursos