Komponent Icon to wygodny sposób na narysowanie na ekranie ikony w jednym kolorze, która jest zgodna z wytycznymi Material Design. Aby używać Icon, dodaj bibliotekę Compose Material (lub bibliotekę Compose Material 3).
Jeśli na przykład masz obiekt rysowany wektorowo, który chcesz załadować z użyciem domyślnych ustawień Material, możesz użyć komponentu Icon w ten sposób:
Icon(
painter = painterResource(R.drawable.baseline_directions_bus_24),
contentDescription = stringResource(id = R.string.bus_content_description)
)
Domyślnie kompozyt Icon ma kolor LocalContentColor.current i rozmiar 24.dp. Zawiera on też parametr tint (który wykorzystuje ten sam mechanizm barwienia, co opisano w sekcji Barwienie obrazu).
Element kompozytowy Icon jest przeznaczony do tworzenia małych elementów ikon. Aby uzyskać więcej opcji dostosowywania, użyj komponentu Image.
Biblioteka ikon Material zawiera też zestaw wstępnie zdefiniowanych ikon Icons, których można używać w Compose bez konieczności ręcznego importowania pliku SVG. Aby narysować zaokrągloną wersję ikony koszyka na zakupy:
Icon(
Icons.Rounded.ShoppingCart,
contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
Warto zauważyć, że nie trzeba używać Icon do renderowania VectorDrawable na ekranie. Pod maską Icon używa Modifier.paint(painterResource(R.drawable.ic_bus_stop) do wyświetlania Icon na ekranie. Więcej informacji o wszystkich dostępnych ikonach znajdziesz w dokumentacji ikon.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy obsługa JavaScript jest wyłączona
- Zasoby w sekcji Tworzenie
- Ułatwienia dostępu w edytorze
- Wczytywanie obrazów {:#loading-images}