Switch

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

  • Activa o desactiva un parámetro de configuración.
  • Habilita o inhabilita una función.
  • Selecciona una opción.

El componente tiene dos partes: el pulgar y la pista. El pulgar es la parte del interruptor que se puede arrastrar, y la pista es el fondo. El usuario puede arrastrar el círculo hacia la izquierda o la derecha para cambiar el estado del interruptor. También pueden presionar el interruptor para verificarlo y borrarlo.

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

Implementación básica

Consulta la referencia de Switch para obtener una definición completa de la API. Los siguientes son 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 a la 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 componible Switch.

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

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

Esta implementación aparece de la siguiente manera si no se marca:

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

Este es el aspecto que tendrá esta opción cuando esté marcado:

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

Implementación avanzada

Los parámetros principales que te recomendamos usar cuando implementes un interruptor más avanzado son los siguientes:

  • thumbContent: Úsalo para personalizar el aspecto del elemento de vista previa cuando se marque.
  • colors: Úsalo para personalizar el color de la pista y la miniatura.

Miniatura personalizada

Puedes pasar cualquier elemento componible para el parámetro thumbContent para crear una miniatura personalizada. El siguiente es un ejemplo de un interruptor que usa un ícono personalizado para su 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
        }
    )
}

En esta implementación, el aspecto sin marcar es el mismo que el ejemplo de la sección anterior. Sin embargo, cuando se verifica, esta implementación aparece de la siguiente manera:

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

Colores personalizados

En el siguiente ejemplo, se muestra cómo puedes usar el parámetro de colores para cambiar el color del botón y el riel 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,
        )
    )
}

Esta implementación aparece de la siguiente manera:

Un interruptor que usa el parámetro de colores para mostrar un interruptor con colores personalizados para el botón y el punto.
Figura 5: Un interruptor con colores personalizados.

Recursos adicionales