Kontenery układu

Jetpack Compose udostępnia kilka kontenerów układu, które pomagają w strukturyzowaniu i rozmieszczaniu komponentów interfejsu. Podstawowe komponenty układu, takie jak Row i Column, obsługują proste układy, ale wiele aplikacji wymaga bardziej elastycznych i adaptacyjnych rozwiązań kontenerów, ponieważ rozmiary ekranu się zmieniają, a dane użytkowników rosną.

Kontenery układu obejmują:

• Leniwe listy i siatki: komponenty takie jak LazyColumn, LazyRow i LazyVerticalGrid, które efektywnie wyświetlają duże lub dynamicznie skalowane zbiory danych, tworząc i układając tylko elementy widoczne w danym momencie w obszarze widoku.
• Pager: kontenery takie jak HorizontalPager i VerticalPager, które umożliwiają użytkownikom przesuwanie lub przewijanie stron z treścią.
• Układy przepływu: elastyczne kontenery jednowymiarowe (FlowRow i FlowColumn), które automatycznie przenoszą przepełnione elementy do następnego wiersza lub kolumny, gdy zabraknie miejsca.
• Siatka: elastyczna, dwuwymiarowa struktura, która wyświetla elementy w układach wielokolumnowych lub wielowierszowych dostosowujących się do rozmiaru kontenera.
• FlexBox: inspirowany CSS Flexbox adaptacyjny kontener, który zapewnia szczegółową kontrolę nad tym, jak elementy zawijają się, powiększają, zmniejszają i wyrównują wzdłuż osi głównej i poprzecznej, aby wypełnić dostępne miejsce.

Wybieranie odpowiedniego kontenera układu

Podczas tworzenia układów w Compose wybór między podstawowymi a bardziej zaawansowanymi kontenerami układu zależy od projektu, tego, czy elementy muszą być zawijane, gdy przestrzeń jest ograniczona, oraz od tego, jak dynamicznie zmienia się rozmiar elementów.

W tabeli poniżej znajdziesz podsumowanie możliwości poszczególnych kontenerów układu jednowymiarowego w Compose:

Kontener	Zawija elementy do nowych wierszy	Rozwijanie poszczególnych elementów	Zmniejszanie poszczególnych elementów	Rozmiar początkowy na element	Elementy rozszerzają się, aby wypełnić dostępne miejsce w wielu wierszach	Zmienianie kolejności elementów	Leniwe ładowanie	Najlepsze zastosowania:
Wiersz / kolumna	❌	✅ (przez weight) tylko pojedynczy wiersz	❌	❌	❌	❌	❌	Jednolite wiersze z niewielką, stałą liczbą elementów. Elementy mieszczą się w dostępnych granicach i nie muszą być zawijane w kilku wierszach.
FlowRow / FlowColumn	✅	Ograniczony	❌	❌	Częściowe	❌	❌	Zastąpiony przez: FlexBox.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Długie lub nieskończone listy elementów, w przypadku których w celu optymalizacji wydajności trzeba renderować tylko widoczne elementy. Dynamiczne lub duże zbiory danych przewijane w jednym kierunku.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Układy wymagające funkcji adaptacyjnych, takich jak określanie rozmiaru początkowego, dynamiczne powiększanie/zmniejszanie elementów (grow/shrink), wizualna zmiana kolejności (order) lub wyrównanie elementów względem osi poprzecznej (alignSelf). Rozmieszczanie elementów o różnych rozmiarach.

Tabela poniżej zawiera podsumowanie możliwości funkcji Grid i innych podobnych funkcji kompozycyjnych:

Kontener	Ścisłe dopasowanie 2D	Rozciąganie elementu (kolumny)	Rozciąganie elementu (wiersze)	Leniwe ładowanie	Najlepsze zastosowania:
Siatka	✅	✅ (przez: GridArea)	✅	❌	Strukturalne układy dwuwymiarowe, w których wszystkie elementy są widoczne na ekranie i wymagają wyraźnego wyrównania w poziomie i pionie. adaptacyjne dostosowywanie układów do różnych rozmiarów ekranu;
LazyVerticalGrid	✅	✅ (przez: span)	❌	✅	Pliki danych z przewijaniem pionowym i duże katalogi wymagające kolumn.
LazyStaggeredGrid	❌ (tylko 1D)	Częściowe (tylko pełny zakres)	❌	✅	Przewijane kanały z elementami o różnej wysokości.
LazyHorizontalGrid	✅	❌	✅	✅	karuzelach przewijanych w poziomie lub danych podzielonych na strony w wielu wierszach.
Łączenie wierszy i kolumn	❌	❌	❌	❌	prosty montaż komponentów, np. umieszczenie etykiety tekstowej obok ikony;