Symbole in Jetpack Compose-Glimmer

Anwendbare XR‑Geräte
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für diese Arten von XR-Geräten zu entwickeln.
Informationen zu XR-Gerätetypen →
AI Glasses
Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist die Komponente Icon speziell für das Rendern einfarbiger Symbole konzipiert. Icon kann ImageVector, ImageBitmap oder Painter als Quelle akzeptieren. Icon kann wie Text intelligent eine Tönung basierend auf dem umgebenden UI-Design anwenden. Standardmäßig wird eine Größe verwendet, die vom LocalIconSize bereitgestellt wird. Sie können aber auch benutzerdefinierte Symbolgrößen festlegen.

Beispiel: Feld mit großem Sternsymbol erstellen

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

Wichtige Punkte zum Code

  • Die Quelle des Symbols lädt ein lokales XML-Vektordrawable (R.drawable.ic_star) mit painterResource. Dies ist der empfohlene Ansatz zum Einbinden von Symbolen in eine Jetpack Compose Glimmer-Benutzeroberfläche ohne Overhead durch externe Bibliotheken.
  • Die Größe des Symbols wird durch Festlegen von GlimmerTheme.iconSizes.large mit einem Modifier angepasst. So wird gezeigt, wie die vordefinierte Größe von Jetpack Compose Glimmer überschrieben wird.
  • Die Farbgebung des Symbols wird durch Festlegen von GlimmerTheme.colors.primary mit dem Parameter „tint“ angepasst. So wird eine einheitliche Farbgebung für das Symbol erreicht.