Switch

El componente Switch permite a los usuarios alternar entre dos estados: marcado y sin marcar. En tu app, puedes usar un interruptor para permitir que el usuario realice una de las siguientes acciones:

  • Activar o desactivar un parámetro de configuración
  • Habilitar o inhabilitar una función
  • Seleccionar una opción

El componente tiene dos partes: el control deslizante y la pista. El control deslizante es la parte arrastrable del interruptor, y la pista es el fondo. El usuario puede arrastrar el control deslizante hacia la izquierda o la derecha para cambiar el estado del interruptor. También puede presionar el interruptor para marcarlo y borrarlo.

Ejemplos del componente Switch en modo claro y oscuro.
Figura 1. El componente de interruptor

Implementación básica

Consulta la referencia de Switch para obtener una definición completa de la API. A continuación, se muestran algunos de los parámetros clave que podrías necesitar usar:

  • checked: Es el estado inicial del interruptor.
  • onCheckedChange: Es una devolución de llamada que se llama cuando cambia el estado del interruptor.
  • enabled: Indica si el interruptor está habilitado o inhabilitado.
  • colors: Son los colores que se usan para el interruptor.

El siguiente ejemplo es una implementación mínima del elemento de componibilidad Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Esta implementación aparece de la siguiente manera cuando no está marcada:

Es un interruptor básico que no está marcado.
Figura 2. Un interruptor sin marcar

Este es el aspecto cuando está marcado:

Un interruptor básico que está marcado.
Figura 3. Un interruptor marcado

Implementación avanzada

Los parámetros principales que puedes usar cuando implementas un interruptor más avanzado son los siguientes:

  • thumbContent: Úsalo para personalizar la apariencia del control deslizante cuando está marcado.
  • colors: Úsalo para personalizar el color de la pista y el control deslizante.

Control deslizante personalizado

Puedes pasar cualquier elemento de componibilidad para el parámetro thumbContent para crear un control deslizante personalizado. El siguiente es un ejemplo de un interruptor que usa un ícono personalizado para su control deslizante:

@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

En esta implementación, la apariencia sin marcar es la misma que la del ejemplo de la sección anterior. Sin embargo, cuando está marcada, esta implementación aparece de la siguiente manera:

Un interruptor que usa el parámetro thumbContent para mostrar un ícono personalizado cuando está marcado.
Figura 4. Un interruptor con un ícono marcado personalizado

Colores personalizados

En el siguiente ejemplo, se muestra cómo puedes usar el parámetro colors para cambiar el color del control deslizante y la pista de un interruptor, teniendo en cuenta si el interruptor 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

Esta implementación aparece de la siguiente manera:

Un interruptor que usa el parámetro colors para mostrar un interruptor con colores personalizados tanto para el control deslizante como para el riel.
Figura 5: Un interruptor con colores personalizados

Recursos adicionales