Siatka

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.

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

Czym Grid różni się od podobnych funkcji kompozycyjnych?

Compose oferuje już podobne komponenty, takie jak LazyVerticalGrid. Te komponenty służą głównie do wizualizacji dużych, jednorodnych zbiorów danych – na przykład do wyświetlania katalogu treści w aplikacji do odtwarzania strumieniowego. Te komponenty NIE są przeznaczone do tworzenia układu strukturalnego ekranu ani złożonego komponentu.

Możesz też wdrożyć układ dwuwymiarowy, łącząc kilka funkcji kompozycyjnych Row i Column. Takie podejście ma jednak pewne wady, takie jak głębokie hierarchie i trudności z adaptacją.

W tabeli poniżej znajdziesz omówienie układów, które 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 tymi terminami.

Linia siatki

Siatka składa się z linii, które biegną poziomo i pionowo. Jeśli siatka ma 3 wiersze, ma 4 linie poziome, w tym tę po ostatnim wierszu. Na poniższym obrazie każda linia przerywana reprezentuje linię siatki:

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

Ścieżka siatki

Tor 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.

Ś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 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. Możesz zdefiniować obszar siatki, rozciągając element na wiele ścieżek.

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

Odstęp siatki

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

Odstęp między pierwszą a drugą kolumną.
Rysunek 6. Odstęp między pierwszą a drugą kolumną.