El componente Switch
permite a los usuarios activar o desactivar entre dos estados: marcado.
y desmarcada. 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 para revisarlo y borrarlo.
![Ejemplos del componente Switch en modo claro y oscuro.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=7&hl=es)
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 quizás debas usar:
checked
: Es el estado inicial del interruptor.onCheckedChange
: Es una devolución de llamada que se llama cuando el estado de la cambios 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:
![Un interruptor básico que está desmarcado](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=7&hl=es)
Este es el aspecto que tendrá esta opción cuando esté marcado:
![Un interruptor básico que está marcado.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=7&hl=es)
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 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
a fin de crear un elemento personalizado.
pulgar. 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 } ) }
En esta implementación, la apariencia desmarcada es la misma que la del ejemplo en en la sección anterior. Sin embargo, cuando se verifica, esta implementación aparece como sigue:
![Un interruptor que usa el parámetro thumbContent para mostrar un ícono personalizado cuando está marcado](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=7&hl=es)
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, ) ) }
Esta implementación aparece de la siguiente manera:
![Un interruptor que usa el parámetro de colores para mostrar un interruptor con colores personalizados para la tachuela y la tachuela](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=7&hl=es)