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.

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 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
        }
    )
}
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 de la siguiente manera:

Figura 4: Un interruptor con un ícono de verificación 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,
        )
    )
}
Switch.kt

Esta implementación aparece de la siguiente manera:

Figura 5: Un interruptor con colores personalizados.

Recursos adicionales

• Documentos de Material UI