Switch

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.

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
        }
    )
}
Switch.kt

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 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
        }
    )
}
Switch.kt

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:

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:

Recursos adicionales

• Documentos de IU de Material