Tworzenie przewijalnego siatki

Za pomocą dynamicznych siatek możesz zarządzać dużymi zbiorami danych i zawartością dynamiczną, co poprawia wydajność aplikacji. Dzięki elementom kompozytowym siatki o opóźnionym renderowaniu możesz wyświetlać elementy w przewijanym kontenerze rozmieszczonym na wielu kolumnach lub wierszach.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Wybór orientacji siatki

Komponenty LazyHorizontalGrid i LazyVerticalGrid umożliwiają wyświetlanie elementów w siatce. Przykładowo, pionowa siatka z opóźnionym wczytywaniem elementów wyświetla je w kontenerze, który można przewijać w kierunku pionowym, obejmując wiele kolumn. Natomiast siatka pozioma z opóźnionym wczytywaniem elementów zachowuje się tak samo na osi poziomej.

Tworzenie przewijalnego siatki

Poniższy kod tworzy poziomą siatkę z 3 kolumnami:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Najważniejsze informacje o kodzie

  • Komponent LazyHorizontalGrid określa orientację poziomą siatki.
    • Aby utworzyć siatkę pionową, użyj zamiast tego funkcji LazyVerticalGrid.
  • Właściwość rows określa sposób rozmieszczania treści w sieci.
    • W przypadku siatki pionowej użyj właściwości columns, aby określić układ.
  • items(itemsList) dodaje itemsList do LazyHorizontalGrid. Funkcja lambda renderuje element Text dla każdego elementu i ustawia tekst w opisie elementu.
  • item() dodaje pojedynczy element do LazyHorizontalGrid, a funkcja lambda renderuje pojedynczą kompozycję Text w podobny sposób do funkcji items().
  • GridCells.Fixed określa liczbę wierszy lub kolumn.

  • Aby utworzyć siatkę z jak największą liczbą wierszy, ustaw liczbę wierszy za pomocą parametru GridCells.Adaptive.

    W tym kodzie wartość 20.dp określa, że każda kolumna ma co najmniej 20 dp, a wszystkie kolumny mają równą szerokość. Jeśli ekran ma szerokość 88 dp, są 4 kolumny po 22 dp każda.

Wyniki

Rysunek 1. pozioma siatka, którą można przewijać, korzystająca z elementu LazyHorizontalGrid
;

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Listy i siatki umożliwiają wyświetlanie kolekcji w atrakcyjnej wizualnie formie, która jest łatwa w użyciu.
Kolekcja krótkich przewodników
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników
Ta seria filmów przedstawia różne interfejsy API usługi Compose, szybko pokazując, co jest dostępne i jak z nich korzystać.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię