Pulsanti in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
AI Glasses
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente Button è un componente interattivo ottimizzato per l'input degli occhiali AI, che offre un feedback visivo chiaro per gli stati abilitato, al passaggio del mouse e premuto per guidare le azioni dell'utente.

Figura 1. Un esempio di alcuni stili diversi di pulsanti in Jetpack Compose Glimmer.

Esempio: varianti del pulsante

@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")
        }
    }
}

Punti chiave sul codice

  • Le icone dei pulsanti provengono da risorse grafiche vettoriali XML locali (R.drawable.ic_favorite) che utilizzano painterResource, sostituendo la dipendenza della libreria Icons.Default per il caricamento ottimizzato degli asset.
  • I parametri leadingIcon e trailingIcon vengono utilizzati per inserire i composable delle icone nel layout del pulsante, dimostrando il supporto di Jetpack Compose Glimmer per il posizionamento flessibile delle icone.
  • I pulsanti utilizzano la configurazione di dimensionamento predefinita, che gestisce automaticamente il padding interno e il ridimensionamento del testo in modo che siano in linea con le specifiche di progettazione standard di Jetpack Compose Glimmer senza modificatori di dimensione espliciti.