Icone 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 Icon è progettato specificamente per il rendering di icone monocolore. Icon può accettare ImageVector, ImageBitmap o Painter come origine. Icon, simile a Text, può applicare in modo intelligente una tinta in base al tema dell'interfaccia utente circostante. Anche se per impostazione predefinita viene utilizzata una dimensione fornita da LocalIconSize, puoi anche impostare dimensioni personalizzate per le icone.

Esempio: crea una casella con un'icona a stella grande

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

Punti chiave sul codice

  • L'origine dell'icona carica un elemento disegnabile vettoriale XML locale (R.drawable.ic_star) utilizzando painterResource, il che dimostra l'approccio consigliato per integrare le icone in un'interfaccia utente Glimmer di Jetpack Compose senza sovraccarico di librerie esterne.
  • Le dimensioni dell'icona vengono personalizzate impostando GlimmerTheme.iconSizes.large con un modificatore, mostrando come eseguire l'override delle dimensioni predefinite di Jetpack Compose Glimmer.
  • Il colore della tinta dell'icona viene personalizzato impostando GlimmerTheme.colors.primary utilizzando il parametro tinta, applicando la colorazione dell'icona in un unico colore per una coerenza visiva.