Switch

El componente Switch permite a los usuarios alternar entre dos estados: marcado y desmarcado. Se puede usar un interruptor (Switch) para permitir que el usuario realice por ejemplo, alguna de las siguientes acciones:

Activar o desactivar un parámetro de configuración.
Habilitar o inhabilitar una función en la app.
Seleccionar una opción.

El componente tiene dos partes: el círculo(Thumb) y la pista(Track). El círculo 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 y lograr el mismo resultado.

Estructura del Switch [Switch]

Implementación

@Composable
Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors()
)

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.
modifier: Modificador que implementará el composable (Opcional).
enabled: Indica si el interruptor está habilitado o inhabilitado.
interactionSource: Usa esta opción para personalizar el color de la ruta y el círculo. (Representa un flujo de interacciones correspondientes a eventos emitidos por un componente)
colors: Los colores que se usaron para el cambio.

@Composable
Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier,
    thumbContent: (@Composable () -> Unit)?,
    enabled: Boolean,
    colors: SwitchColors,
    interactionSource: MutableInteractionSource
)

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.
modifier: Modificador que implementará el composable (Opcional).
thumbContent: Úsalo para personalizar la apariencia del círculo cuando está marcado.
enabled: Indica si el interruptor está habilitado o inhabilitado.
colors: Los colores que se usaron para el cambio.
interactionSource: Usa esta opción para personalizar el color de la ruta y el círculo. (Representa un flujo de interacciones correspondientes a eventos emitidos por un componente)

Ejemplos

Material
Material 3

import androidx.compose.material.Switch
@Composable
fun SwitchDefault() {
    val checkedState = remember { mutableStateOf(true) }
    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
}

Switch

import androidx.compose.material3.Switch
@Composable
fun SwitchDefault() {
    val checkedState = remember { mutableStateOf(true) }
    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )
}

Switch