Listy w Jetpack Compose Glimmer

Odpowiednie urządzenia z XR

Ten przewodnik pomoże 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 Glimmerze w Jetpack Compose element VerticalList działa podobnie jak element w Compose LazyColumn, ponieważ komponuje i rozmieszcza tylko widoczne elementy, aby zapewnić wysoką wydajność. Jednak w przypadku Glimmera w Jetpack Compose listy pionowe są tworzone z myślą o sterowaniu 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 zaznaczony.

Zachowanie zaznaczenia i elementy podrzędne

Listy pionowe są zoptymalizowane pod kątem automatycznego obsługiwania nawigacji opartej na zaznaczeniu. W przeciwieństwie do list na urządzeniach mobilnych, gdzie zaznaczenie i przewijanie są często oddzielne, lista pionowa koordynuje te 2 elementy, przesuwając zaznaczenie przez elementy podrzędne, gdy użytkownik przewija za pomocą touchpada. Sama lista nie jest zaznaczalna, więc zarządza zaznaczeniem i żąda go dla swoich elementów podrzędnych, aby użytkownik miał wyraźny punkt interakcji podczas przewijania.

Ponieważ nie ma bezpośredniego dotykowego wprowadzania danych, wszystkie elementy podrzędne umieszczone na liście pionowej muszą być możliwe do zaznaczenia. Gdy elementy są zaznaczone, należy zapewnić wizualną reakcję, np. aktywną obwódkę lub wyróżnienie. Użytkownicy mogą przewijać elementy, które nie są zaznaczalne, ale nie mogą z nimi wchodzić w interakcję. W miarę możliwości używaj wbudowanych komponentów, takich jak ListItem lub Card w listach pionowych, ponieważ te komponenty są już możliwe do zaznaczenia i zapewniają wizualne informacje zwrotne o stanach zaznaczenia.

Przykład: lista pionowa z kilkoma elementami

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

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
ListSamples.kt

Przykład: lista pionowa z miejscem na tytuł

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

Poniższy kod tworzy listę pionową z miejscem na tytuł:

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

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

Użyj elementu ListState, aby kontrolować i obserwować różne aspekty stanu listy , takie jak jej położenie przewijania, za pomocą właściwości firstVisibleItemIndex i firstVisibleItemScrollOffset.

Możesz podnieść ten stan za pomocą elementów rememberListState, aby programowo przewijać za pomocą elementów scrollToItem i animateScrollToItem.