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.
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 } ) }
Esta implementación aparece de la siguiente manera cuando no se marca:
Este es el aspecto que tendrá esta opción cuando esté 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 } ) }
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:
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, ) ) }
Esta implementación aparece de la siguiente manera: