Botones en Jetpack Compose Glimmer

Dispositivos XR aplicables
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de XR.
Más información sobre los tipos de dispositivos XR →
Lentes con IA
Más información sobre los tipos de dispositivos XR →

En Jetpack Compose Glimmer, el componente Button es un componente interactivo optimizado para la entrada de lentes con IA, que ofrece comentarios visuales claros para sus estados habilitado, en enfoque y presionado para guiar las acciones del usuario.

Figura 1: Ejemplo de algunos estilos diferentes de botones en Jetpack Compose Glimmer.

Ejemplo: Variaciones de botones

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

Puntos clave sobre el código

  • Los íconos de botones usan elementos de diseño vectoriales XML locales (R.drawable.ic_favorite) con painterResource, lo que reemplaza la dependencia de la biblioteca Icons.Default para la carga optimizada de recursos.
  • Los parámetros leadingIcon y trailingIcon se utilizan para insertar elementos leadingIcon componibles de íconos en el diseño del botón, lo que demuestra la compatibilidad de Jetpack Compose Glimmer con el posicionamiento flexible de íconos.
  • Los botones usan la configuración de tamaño predeterminada, que administra automáticamente el padding interno y el ajuste de escala del texto para alinearse con las especificaciones de diseño de Glimmer de Jetpack Compose estándar sin modificadores de tamaño explícitos.