Grid to interfejs API Jetpack Compose, który umożliwia elastyczne wdrażanie układu dwuwymiarowego.
Dzięki temu interfejsowi API możesz wyświetlać elementy w układach wielokolumnowych lub wielowierszowych, które dostosowują się do dostępnego rozmiaru kontenera.
Grid.
Czym Grid różni się od podobnych elementów kompozycyjnych?
Compose oferuje już podobne komponenty, takie jak LazyVerticalGrid.
Te komponenty służą głównie do wizualizacji dużych, jednorodnych zbiorów danych, np. do wyświetlania katalogu treści w aplikacji do strumieniowego przesyłania wideo. Te komponenty NIE są przeznaczone do układu strukturalnego ekranu ani złożonego komponentu.
Możesz też wdrożyć układ dwuwymiarowy, łącząc kilka elementów kompozycyjnych Row i Column.
Takie podejście ma jednak pewne wady, np. głębokie hierarchie i trudności z dostosowaniem.
W tabeli poniżej znajdziesz informacje o tym, które układy są odpowiednie dla poszczególnych interfejsów API:
| Komponent | Cel |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Wizualizacja dużych, jednorodnych zbiorów danych, które wymagają leniwego ładowania. |
Row, Column, FlexBox |
Układ jednowymiarowy |
Grid |
Układ dwuwymiarowy |
Terminologia
Aby zrozumieć, jak działa Grid, zapoznaj się z tą terminologią.
Linia siatki
Siatka składa się z linii, które przebiegają poziomo i pionowo. Jeśli siatka ma 3 wiersze, ma 4 linie poziome, w tym linię po ostatnim wierszu. Na ilustracji poniżej każda linia przerywana reprezentuje linię siatki:
Ścieżka siatki
Ścieżka siatki to przestrzeń między 2 liniami siatki. Ścieżka wiersza znajduje się między 2 liniami poziomymi, a ścieżka kolumny – między 2 liniami pionowymi. Aby określić rozmiar tych ścieżek, przypisz im rozmiar podczas tworzenia siatki.
Komórka tabeli
Komórka tabeli to przecięcie ścieżki wiersza i ścieżki kolumny.
Obszar siatki
Obszar siatki składa się z kilku komórek tabeli. Obszar siatki możesz zdefiniować, sprawiając, że element będzie obejmował kilka ścieżek.
Odstęp siatki
Odstęp siatki to margines między ścieżkami siatki. Nie możesz umieścić elementu interfejsu w odstępie, ale możesz go rozciągnąć.
