Switch

El componente Switch permite a los usuarios alternar entre dos estados: marcado y desmarcado. En tu app, puedes usar un switch para permitir que el usuario realice una de las lo siguiente:

• 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 el ícono arrastrable del interruptor, y la pista es el fondo. El usuario puede arrastrar el pulgar a la izquierda o derecha para cambiar el estado del interruptor. También pueden presionar el interruptor para revisarlo 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. 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
        }
    )
}
Switch.kt

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

Figura 2: Un interruptor sin marcar

Esta es la apariencia cuando está marcada:

Figura 3: Un interruptor marcado.

Implementación avanzada

Los parámetros principales que quizá desees usar cuando implementes una configuración son los siguientes:

• thumbContent: Úsalo para personalizar la apariencia del pulgar cuando que está marcado.
• 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 conmutador que utiliza un icono 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
        }
    )
}
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 aparece como sigue:

Figura 4: Un interruptor con un ícono de verificación personalizado.

Colores personalizados

El siguiente ejemplo demuestra cómo puedes usar el parámetro de colores para cambiar el color del círculo y la barra de un interruptor, teniendo en cuenta si el 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 Material UI