Switch

El componente Switch permite a los usuarios activar o desactivar entre dos estados: marcado y desmarcado. En tu app, puedes usar un interruptor para permitir que el usuario realice 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 círculo y la pista. El pulgar es la parte arrastrable del interruptor, y la pista es el fondo. El usuario puede arrastrar el pulgar hacia la izquierda o la derecha para cambiar el estado del interruptor. También pueden presionar el interruptor para verificarlo y borrarlo.

Figura 1: El componente del 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 puedes necesitar:

• 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 componible 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 se marca:

Figura 2: Un interruptor sin marcar

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

Figura 3: Un interruptor marcado.

Implementación avanzada

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

• thumbContent: Úsalo para personalizar la apariencia del círculo que está marcado.
• colors: Úsalo para personalizar el color de la pista y del círculo.

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 el círculo:

@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, el aspecto sin marcar es el mismo que el ejemplo de la sección anterior. Sin embargo, cuando se verifica, esta implementación se muestra de la siguiente manera:

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 círculo y de la pista de un interruptor en función de 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:

Figura 5: Un interruptor con colores personalizados

Recursos adicionales

• Documentos de IU de Material