Listy 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 Jetpack Compose Glimmer listy to komponenty interfejsu, które można przewijać w pionie. Renderują one tylko widoczne elementy, co zapewnia wydajność. Zostały zaprojektowane tak, aby zapewniać określone zachowania i kompatybilność z danymi wejściowymi w aplikacjach na okulary AI. Jetpack Compose Glimmer realizuje to za pomocą komponentów VerticalList i ListItem.

Rysunek 1. Przykład różnych stylów list w Glimmerze w Jetpack Compose.

VerticalList to komponent Glimmer w Jetpack Compose służący do wyświetlania przewijanej zawartości w pionie. Oferuje te same funkcje API co LazyColumn, ale z zachowaniami zoptymalizowanymi pod kątem Jetpack Compose Glimmer i okularów AI z wyświetlaczem.

Listy Glimmer w Jetpack Compose mają kilka unikalnych ograniczeń:

  • Listy powinny zawierać maksymalnie 3 elementy w widoku.
  • Gdy lista zawiera więcej elementów, niż mieści się w widoku, w pobliżu jej granic używana jest czarna zasłona.

Przykład: wyświetlanie listy pionowej z 3 elementami

Poniższy kod pokazuje, jak za pomocą komponentów VerticalList i ListItem utworzyć listę 3 elementów:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Najważniejsze informacje o kodzie

  • Lista zawiera 3 elementy wygenerowane dynamicznie, z których każdy jest ListItem.
  • Każdy ListItem można dostosować i dodać do niego ikonę.