Materialsymbole

Die zusammensetzbare Funktion Icon ist eine bequeme Möglichkeit, ein einfarbiges Symbol auf dem Bildschirm zu zeichnen, das den Material Design-Richtlinien entspricht. Wenn du Icon verwenden möchtest, musst du die Compose Material-Bibliothek (oder die Compose Material 3-Bibliothek) einbinden.

Wenn Sie beispielsweise ein Vektor-Drawable mit Standardeinstellungen für Material laden wollten, können Sie die zusammensetzbare Funktion Icon so verwenden:

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)
MaterialIconsSnippets.kt

Die zusammensetzbare Funktion Icon ist standardmäßig mit LocalContentColor.current gefärbt und hat die Größe 24.dp. Außerdem wird der Farbparameter tint zur Verfügung gestellt, der denselben Mechanismus für die Färbung nutzt, wie im Abschnitt Bildfärbung beschrieben. Die zusammensetzbare Funktion Icon ist für kleine Symbolelemente vorgesehen. Für weitere Anpassungsoptionen sollten Sie die zusammensetzbare Funktion Image verwenden.

Die Material Icon-Bibliothek enthält außerdem eine Reihe vordefinierter Icons-Elemente, die in Compose verwendet werden können, ohne dass ein SVG manuell importiert werden muss. So zeichnen Sie die abgerundete Version des Einkaufswagensymbols:

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
MaterialIconsSnippets.kt

Abbildung 1: Einkaufswagenvektor mit Symbol

Du musst Icon nicht verwenden, um ein VectorDrawable-Element auf dem Bildschirm zu rendern. Im Hintergrund verwendet Icon Modifier.paint(painterResource(R.drawable.ic_bus_stop)), um Icon auf dem Bildschirm zu zeichnen. Weitere Informationen zu allen verfügbaren Symbolen finden Sie in der Dokumentation zu Symbolen.