Düzen kapsayıcıları

Jetpack Compose, kullanıcı arayüzü bileşenlerinizi yapılandırmanıza ve düzenlemenize yardımcı olacak çeşitli düzen kapsayıcıları sunar. Row ve Column gibi temel düzen bileşenleri basit düzenlemeleri işlerken, birçok uygulama ekran boyutları değiştikçe ve kullanıcı verileri arttıkça daha duyarlı ve uyarlanabilir kapsayıcı çözümleri gerektirir.

Düzen kapsayıcıları şunları içerir:

• Tembel listeler ve tembel ızgaralar: Yalnızca görüntü alanında görünen öğeleri oluşturup düzenleyerek büyük veya dinamik boyutlu veri kümelerini verimli bir şekilde gösteren LazyColumn, LazyRow ve LazyVerticalGrid gibi bileşenler.
• Sayfa gezgini: Kullanıcıların içerik sayfaları arasında kaydırma yapmasına olanak tanıyan HorizontalPager ve VerticalPager gibi kapsayıcılar.
• Akış düzenleri: Alan yetersiz olduğunda taşan öğeleri otomatik olarak bir sonraki satıra veya sütuna sığdıran duyarlı tek boyutlu kapsayıcılar (FlowRow ve FlowColumn).
• Izgara: Öğeleri, kapsayıcı boyutuna uyum sağlayan çok sütunlu veya çok satırlı düzenlerde gösteren esnek, iki boyutlu bir yapı.
• FlexBox: CSS Flexbox'tan ilham alan, öğelerin kullanılabilir alanı doldurmak için ana ve çapraz eksenler boyunca nasıl sarmalanacağı, büyüyeceği, küçüleceği ve hizalanacağı üzerinde ayrıntılı kontrol sağlayan uyarlanabilir bir kapsayıcıdır.

Doğru düzen kapsayıcısını seçme

Oluşturma'da düzen oluştururken temel ve daha gelişmiş düzen kapsayıcıları arasında seçim yapmak tasarımınıza, alan kısıtlı olduğunda öğelerin sarmalanması gerekip gerekmediğine ve öğelerin dinamik olarak nasıl yeniden boyutlandırıldığına bağlıdır.

Aşağıdaki tabloda, Compose 1D düzen kapsayıcılarının her birinin özellikleri özetlenmiştir:

Kapsayıcı	Öğeleri yeni satırlara kaydırır	Öğe başına büyüme	Öğe başına fire	Öğe başına başlangıç boyutu	Öğeler, birden fazla satırdaki kullanılabilir alanı dolduracak şekilde büyür	Öğeleri yeniden sıralama	Geç yükleme	En uygun olduğu durumlar:
Satır / Sütun	❌	✅ (weight üzerinden) yalnızca tek satır	❌	❌	❌	❌	❌	Az sayıda ve sabit sayıda öğe içeren tek tip satırlar. Öğeler, mevcut sınırlara sığar ve birden fazla satıra sarmalanması gerekmez.
FlowRow / FlowColumn	✅	Sınırlı	❌	❌	Kısmi	❌	❌	FlexBox ile değiştirildi.
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	Performans optimizasyonu için yalnızca görünür öğelerin oluşturulması gereken uzun veya sonsuz öğe listeleri. Tek yönde kaydırılan dinamik veya büyük veri kümeleri.
FlexBox	✅	✅	✅	✅	✅	✅	❌	Başlangıç boyutunu belirtme, dinamik öğe büyütme/küçültme (grow/shrink), görsel yeniden sıralama (order) veya öğe düzeyinde çapraz eksen hizalama (alignSelf) gibi uyarlanabilir özellikler gerektiren düzenler. Farklı boyutlardaki öğeler düzenleniyor.

Aşağıdaki tabloda, Grid ve diğer benzer bileşenlerin özellikleri özetlenmiştir:

Kapsayıcı	Katı 2D eşleşme	Öğe yayma (sütunlar)	Öğe yayma (satırlar)	Geç yükleme	En uygun olduğu durumlar:
Izgara	✅	✅ (GridArea üzerinden)	✅	❌	Tüm öğelerin ekranda olduğu ve açık yatay ve dikey hizalama gerektiren yapısal iki boyutlu düzenler. Düzenleri ekran boyutlarına göre uyarlanabilir şekilde yeniden yapılandırma
LazyVerticalGrid	✅	✅ (span üzerinden)	❌	✅	Dikey kaydırmalı feed'ler ve sütun gerektiren büyük kataloglar.
LazyStaggeredGrid	❌ (yalnızca 1D)	Kısmi (yalnızca tam aralık)	❌	✅	Farklı yüksekliklerdeki öğelerin yer aldığı feed'lerde gezinme.
LazyHorizontalGrid	✅	❌	✅	✅	Yatay kaydırmalı bantlar veya çok satırlı sayfalandırılmış veriler.
Satır ve sütunları birleştirme	❌	❌	❌	❌	Bir simgenin yanına metin etiketi yerleştirme gibi basit bileşen montajı.