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 marcado. Los botones de activación están optimizados para los lentes de visualización para proporcionar transiciones visuales claras en forma y color. Estas transiciones indican cuándo una acción o configuración está activa.

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 obtener contexto adicional.

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

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:

• No marcada: GlimmerTheme.shapes.large (por lo general, un CircleShape).
• Marcada: ToggleButtonDefaults.CheckedShape (un RoundedCornerShape con esquinas de 20.dp).

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

• No marcada: El valor predeterminado es GlimmerTheme.colors.surface.
• Marcada: El valor predeterminado 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: Una función de fábrica para personalizar los colores de fondo y de contenido para ambos estados.
• CheckedShape: Un RoundedCornerShape(20.dp) estático que se usa para el estado marcado.
• 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 inicial

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt