Icônes dans Jetpack Compose Glimmer

Appareils XR concernés

Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.

En savoir plus sur les types d'appareils XR

En savoir plus sur les types d'appareils XR

Dans Jetpack Compose Glimmer, le composant Icon est spécialement conçu pour afficher des icônes monochromes. Icon peut accepter ImageVector, ImageBitmap ou Painter comme source. Icon, semblable à Text, peut appliquer intelligemment une teinte en fonction du thème de l'UI environnante. Bien que la taille par défaut soit celle fournie par LocalIconSize, vous pouvez également définir des tailles d'icônes personnalisées.

Exemple : Créer une boîte avec une grande icône en forme d'étoile

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

Points clés concernant le code

• La source de l'icône charge un drawable vectoriel XML local (R.drawable.ic_star) à l'aide de painterResource, ce qui illustre l'approche recommandée pour intégrer des icônes dans une UI Glimmer Jetpack Compose sans surcharge de bibliothèque externe.
• La taille de l'icône est personnalisée en définissant GlimmerTheme.iconSizes.large avec un modificateur, ce qui montre comment remplacer la taille prédéfinie de Jetpack Compose Glimmer.
• La couleur de la teinte de l'icône est personnalisée en définissant GlimmerTheme.colors.primary à l'aide du paramètre de teinte, en appliquant une teinte d'icône monochrome pour la cohérence visuelle.