Siatka

Grid to interfejs API Jetpack Compose, który umożliwia elastyczne wdrażanie układu dwuwymiarowego. Za pomocą tego interfejsu API możesz wyświetlać elementy w układach wielokolumnowych lub wielorzędowych, które dostosowują się do dostępnego rozmiaru kontenera.

Elastyczny i adaptacyjny układ dwuwymiarowy z użyciem siatki
Rysunek 1. Elastyczny i adaptacyjny układ dwuwymiarowy z Grid.

Czym komponent Grid różni się od podobnych komponentów?

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 odtwarzania strumieniowego. NIE są one przeznaczone do układu strukturalnego ekranu ani złożonych komponentów.

Możesz też wdrożyć układ dwuwymiarowy, łącząc kilka komponentów RowColumn. Ma ono jednak pewne wady, takie jak głębokie hierarchie i trudności z dostosowaniem.

W tabeli poniżej znajdziesz przegląd układów odpowiednich dla poszczególnych interfejsów API:

Komponent Cel
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid Wizualizacja dużych, jednorodnych zbiorów danych, która wymaga 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 biegnących w pionie i poziomie. Jeśli siatka ma 3 wiersze, zawiera 4 linie poziome, w tym linię po ostatnim wierszu. Na ilustracji poniżej każda linia przerywana reprezentuje linię siatki:

Siatka składa się z 4 linii poziomych i 3 linii pionowych.
Rysunek 2. Siatka składa się z 4 linii poziomych i 3 linii pionowych.

Ścieżka siatki

Ścieżka siatki to przestrzeń między dwiema 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.

Ścieżka siatki dla pierwszego wiersza.
Rysunek 3. Ścieżka siatki dla pierwszego wiersza.

Komórka tabeli

Komórka siatki to przecięcie ścieżki wiersza i ścieżki kolumny.

Komórka siatki, która jest przecięciem drugiego wiersza i drugiej kolumny.
Rysunek 4. Komórka siatki, która jest przecięciem drugiego wiersza i drugiej kolumny.

Obszar siatki

Obszar siatki składa się z kilku komórek siatki. Obszar siatki możesz zdefiniować, sprawiając, że element będzie obejmował wiele ścieżek.

Obszar siatki składający się z 4 komórek siatki.
Rysunek 5. Obszar siatki składający się z 4 komórek siatki.

Odstęp siatki

Odstęp siatki to odstęp między ścieżkami siatki. Nie możesz umieścić elementu interfejsu w luki, ale możesz go rozciągnąć na całą lukę.

odstęp między pierwszą a drugą kolumną siatki;
Rysunek 6. odstęp między pierwszą a drugą kolumną siatki;