Listy 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 →
Okulary z wyświetlaczem
Więcej informacji o typach urządzeń z XR →

W Glimmerze w Jetpack Compose GlimmerLazyColumn działa podobnie jak Compose LazyColumn – tworzy i rozmieszcza tylko widoczne elementy, aby zapewnić wysoką wydajność. Kolumny leniwe w Glimmerze są jednak przeznaczone do sterowania okularami z wyświetlaczem, w których użytkownik wchodzi w interakcję za pomocą touchpada, a nie ekranu dotykowego. Użytkownik mobilny może w dowolnym momencie dotknąć dowolnego miejsca na ekranie, a użytkownik okularów z wyświetlaczem może wchodzić w interakcję tylko z elementem, który jest aktywny.

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

Zachowanie fokusu i elementy podrzędne

Kolumny leniwe w Glimmerze automatycznie obsługują nawigację opartą na fokusie. W przeciwieństwie do list na urządzeniach mobilnych, gdzie fokus i przewijanie są często oddzielne, kolumna leniwa w Glimmerze koordynuje te 2 elementy, przesuwając fokus między elementami podrzędnymi, gdy użytkownik przewija listę za pomocą touchpada. Sama lista nie jest aktywna, więc zarządza fokusem i żąda go dla swoich elementów podrzędnych, aby użytkownik miał wyraźny punkt interakcji podczas przewijania.

Ponieważ nie ma bezpośredniego dotyku, wszystkie elementy podrzędne w kolumnie leniwej w Glimmerze muszą być aktywne. Gdy elementy są aktywne, zapewnij też wizualną reakcję, np. aktywną obwódkę lub wyróżnienie. Użytkownicy mogą nadal przewijać elementy nieaktywne, ale nie mogą z nimi wchodzić w interakcję. Jeśli to możliwe, używaj wbudowanych komponentów takich jak ListItem czy Card, ponieważ są one już aktywne i zapewniają wizualne informacje o stanach fokusu

Przykład: kolumny leniwe w Glimmerze z wieloma elementami

Poniższy kod pokazuje, jak używać kolumny leniwej w Glimmerze z metodami DSL item i items do tworzenia listy elementów:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

LazyColumn

Przykład: kolumny leniwe w Glimmerze z miejscem na tytuł

Glimmer w Jetpack Compose udostępnia też przeciążenie GlimmerLazyColumn, które zawiera miejsce na tytuł. Nieaktywny tytuł, zwykle TitleChip, pozostaje statyczny w środku u góry, a zawartość listy przewija się pod nim.

Poniższy kod tworzy kolumnę leniwą w Glimmerze z miejscem na tytuł:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}

Używanie stanu listy leniwej w Glimmerze do programowego wykonywania operacji na liście

Aby kontrolować i obserwować różne aspekty stanu listy, np. jej pozycję przewijania za pomocą właściwości firstVisibleItemIndex i firstVisibleItemScrollOffset, użyj GlimmerLazyListState.

Możesz podnieść ten stan za pomocą rememberGlimmerLazyListState, aby programowo przewijać listę za pomocą scrollToItem i animateScrollToItem.