Ikony w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR

Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z XR.

Więcej informacji o typach urządzeń z XR →

Więcej informacji o typach urządzeń z XR →

W Jetpack Compose Glimmer komponent Icon to element interfejsu do renderowania ikon jednokolorowych. Ikony inteligentnie obsługują odcienie i skalowanie, dzięki czemu pozostają czytelne i wizualnie spójne z GlimmerTheme.

Rozmiary

Domyślnie ikony mają rozmiar określony przez LocalIconSize, ale możesz też użyć 3 rozmiarów ikon, aby ustawić konkretny rozmiar. Te rozmiary są też domyślnie używane w tych kontekstach:

Źródła ikon

Ikony mogą akceptować jako źródło ImageVector, ImageBitmap lub Painter. Podczas definiowania własnych ikon używaj w miarę możliwości ImageVector, aby zapewnić ostre renderowanie w dowolnej skali na okularach z wyświetlaczem.

Kolor i odcień

• Automatyczny odcień: ikona określa swój kolor na podstawie LocalContentColor podanego przez element nadrzędny LocalContentColor, np. surface lub Button.
• Ręczne odcienie: użyj parametru tint, aby zastosować określony kolor.
• Zasoby wielokolorowe: w przypadku ikon, które nie powinny być odcieniowane (np. wielokolorowe logo marki), ustaw tint = Color.Unspecified.
• Obrazy ogólne: w przypadku zdjęć lub obrazów ogólnych, które nie są zgodne z zasadami dotyczącymi rozmiaru i odcieniowania ikon , użyj standardowego elementu androidx.compose.foundation.Image.

Przykład: podstawowa ikona

Poniższy kod tworzy podstawową ikonę:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

Przykład: ikony z kolorem

Poniższy kod tworzy kolorową ikonę, używając koloru podstawowego motywu:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

Przykład: ikony o różnych rozmiarach

Poniższy kod tworzy ikonę, która jest modyfikowana do określonego rozmiaru:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

Najważniejsze informacje o kodzie

• Rozmiar ikony jest dostosowywany za pomocą GlimmerTheme.iconSizes z a modyfikatorem. W przypadku ikon domyślna wartość to GlimmerTheme.iconSizes.medium. Aby zachować spójność interfejsu, używaj tych rozmiarów zamiast wartości zakodowanych na stałe.
• Podaje zlokalizowany element contentDescription ikony. Zawsze podawaj te opisy, chyba że ikona ma charakter wyłącznie dekoracyjny.