Ikony w Jetpack Compose Glimmer

Odpowiednie urządzenia XR
Te wskazówki pomogą Ci tworzyć treści na te urządzenia XR.
Więcej informacji o typach urządzeń XR →
Okulary AI
Więcej informacji o typach urządzeń XR →

W bibliotece Jetpack Compose Glimmer komponent Icon jest przeznaczony specjalnie do renderowania jednokolorowych ikon. Icon może akceptować jako źródło ImageVector, ImageBitmap lub Painter. Icon, podobnie jak Text, może inteligentnie stosować odcień na podstawie motywu interfejsu. Domyślnie jest to rozmiar podany przez LocalIconSize, ale możesz też ustawić niestandardowe rozmiary ikon.

Przykład: tworzenie pola z dużą ikoną gwiazdy

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

Najważniejsze informacje o kodzie

  • Źródło ikony wczytuje lokalny rysunek wektorowy XML (R.drawable.ic_star) za pomocą painterResource, co pokazuje zalecane podejście do integrowania ikon z interfejsem Glimmer w Jetpack Compose bez obciążenia zewnętrzną biblioteką.
  • Rozmiar ikony jest dostosowywany przez ustawienie GlimmerTheme.iconSizes.large za pomocą modyfikatora, co pokazuje, jak zastąpić predefiniowane rozmiary Glimmer w Jetpack Compose.
  • Kolor odcienia ikony jest dostosowywany przez ustawienie GlimmerTheme.colors.primary za pomocą parametru odcienia, co zapewnia spójność wizualną dzięki zastosowaniu odcienia ikony w jednym kolorze.