Botones de activación en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, un ToggleButton es un componente interactivo que cambia su apariencia según un estado de verificación. Los botones de activación están optimizados para los lentes con pantalla y proporcionan transiciones visuales claras en forma y color. Estas transiciones indican cuándo una acción o un parámetro de configuración están activos.

Usa botones de activación para exponer acciones que se pueden activar o desactivar. A diferencia de los botones de activación solo con íconos, un botón de activación muestra principalmente contenido de texto, aunque admite ranuras de íconos opcionales para brindar contexto adicional.

Para otros casos de uso, también hay botones estándar y botones de ícono.

Anatomía

Un botón de activación consta de un contenedor que se transforma entre estados y una etiqueta con íconos opcionales.

Tamaños

Al igual que los botones estándar, los botones de activación admiten dos variantes de tamaño:

Valores predeterminados del botón de activación

De forma predeterminada, los botones de activación usan ToggleButtonDefaults.animateShape. Esto crea una transición suave entre los siguientes estados:

• Sin marcar: GlimmerTheme.shapes.large (por lo general, un CircleShape)
• Marcado: ToggleButtonDefaults.CheckedShape (un RoundedCornerShape con esquinas 20.dp).

La clase ToggleButtonColors administra la resolución de color para los siguientes estados:

• Sin marcar: La configuración predeterminada es GlimmerTheme.colors.surface.
• Activado: La configuración predeterminada es GlimmerTheme.colors.surface.

Animación

Los botones de activación usan los siguientes valores predeterminados para la animación:

• animateShape: Proporciona un Shape que interpola los tamaños de las esquinas con una especificación de animación de resorte (stiffness = 600f).
• colors: Es una función de fábrica para personalizar los colores de fondo y de contenido para ambos estados.
• CheckedShape: Es un RoundedCornerShape(20.dp) estático que se usa para el estado verificado.
• contentPadding: Hereda de ButtonDefaults.contentPadding.

Ejemplo: Botón de activación

El siguiente código crea un botón de activación básico:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

Ejemplo: Botón de activación con ícono principal

El siguiente código crea un botón de activación con un ícono inicial:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt