Izgarada tembel listeler

Dört yıldız puanı simgesi

Grid composable, yapısal ve iki boyutlu ekran düzenleri oluşturur. Grid, kullanıcı arayüzünüzün temel mimarisi olarak açıkça tanımlanmış kanalları (satırlar ve sütunlar) ve boşlukları kullanarak duyarlı bir düzen yapısı tanımlar.

Grid, geç yükleme kapsayıcısı yerine yapısal bir kapsayıcı olduğundan, kaydırma sırasında öğeleri geri dönüştürmeden içine yerleştirilen her öğeyi açıkça tanımlamanız gerekir. Bu nedenle, büyük veya dinamik veri kümelerini doğrudan bir Grid içinde oluşturmak, tüm öğeler aynı anda oluşturulduğu için performans darboğazlarına neden olabilir.

Büyük veri koleksiyonlarını yapılandırılmış bir ekran düzeninde görüntülemek için Grid hücrelerinize LazyColumn veya LazyRow gibi geç yüklenen bileşenler yerleştirin. Ancak esnek parçaların (1.fr gibi özelliklere sahip) alt öğelerin iç boyutlarını sorguladığını unutmayın. SubcomposeLayout, içsel ölçüm geçişlerini desteklemediğinden esnek bir parçaya geç listesi yerleştirmek IllegalStateException kilitlenmesine neden olur. Tembel listeleri esnek bir ızgara kanalına güvenli bir şekilde yerleştirmek için içsel ölçüm geçişini atlamak üzere GridTrackSize.MinMax boyutlandırmayı (ör. minmax(0.dp, 1.fr)) kullanmanız gerekir.

Üst kısımda başlık, ana içerik alanında kaydırılabilir öğe listesi ve alt kısımda altbilgi bulunan ekran düzeni.
Şekil 1. Üstbilgi, altbilgi ve içerik için yerleşik LazyColumn içeren yapısal ekran düzeni.

En iyi uygulamalar

  • Büyük açık döngüler yerine geç yüklenen listeler kullanın: Yapılandırılmış bir Grid içinde büyük veya dinamik veri kümelerini görüntülemek için öğeler üzerinde büyük açık döngüler oluşturmak yerine belirli ızgara hücrelerine geç yüklenen bileşenleri (genellikle LazyColumn veya LazyRow) yerleştirin. Grid, öğeleri geri dönüştürmez ve 1.000 parça sınırı vardır.
  • Yavaş listeler için MinMax parça boyutlandırmasını kullanın: LazyColumn ve LazyRow, içsel ölçüm geçişlerini desteklemediğinden (SubcomposeLayout bölümüne bakın) içsel ölçümleri güvenli bir şekilde atlamak için yavaş bileşenleri barındıran esnek parçalarda GridTrackSize.MinMax kullanın.

Malzemeler

  • Grid: Öğeleri, açık satır ve sütun kanalları kullanılarak yapılandırılmış iki boyutlu bir ızgara yapısına yerleştiren composable düzendir.
  • LazyColumn: Yalnızca ekranda görünen öğeleri oluşturan ve geri dönüştüren dikey kaydırma listesi.
  • GridTrackSize.MinMax: Çalışma zamanı ölçüm kilitlenmelerini tetiklemeden geç yüklenen bileşenleri güvenli bir şekilde barındırmak için esnek sınırları (min ve max) tanımlayan iz boyutlandırma özelliği.
  • gridItem: Bir alt kullanıcı arayüzü öğesini Grid içindeki belirli bir hücreye veya adlandırılmış alana atayan Compose Modifier uzantısı.

Adımlar

Anlamsal alan tanımlayıcıları belirleyerek, ızgara kanallarını geç yüklenen liste uyumluluğu için minmax boyutlandırmayla yapılandırarak ve LazyColumn öğesini ızgara içerik alanına yerleştirerek ekran düzeninizi yapılandırın.

1. Izgara kanallarını ve adlandırılmış alanları yapılandırma

Ekran düzeninizin farklı bölgelerini temsil edecek bir enum sınıfı oluşturun ve düzen parçalarınız ile adlandırılmış alanlarınız için bir GridConfigurationScope lambda tanımlayın. Üstbilgi ve altbilgi satırlarının içerik boyutlarına uyması için GridTrackSize.MaxContent, desteklenmeyen iç ölçümleri sorgulamadan esnek alan ayırmak için de geç yüklenen listeyi barındıran içerik kanalında minmax(0.dp, 1.fr) kullanın:

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}

2. Statik bileşenleri ızgaraya yerleştirme

Birleştirilebilir öğenizde lazyConfig öğesini Grid kapsayıcısına iletin. content lambda'sının içine statik bileşenleri (Header ve Footer) yerleştirin ve ilgili alan tanımlayıcılarıyla Modifier.gridItem() kullanarak konumlandırın.

3. LazyColumn'u içerik alanına yerleştirme

İçerik hücresinde, Modifier.gridItem(ScreenArea.Content) kullanarak LazyColumn öğesini yerleştirin. İçerik kanalı 1. adımda minmax(0.dp, 1.fr) ile yapılandırıldığından LazyColumn, desteklenmeyen iç boyutları sorgulamadan kaydırma sırasında öğeleri güvenli bir şekilde ölçebilir ve geri dönüştürebilir:

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}

Sonuçlar

Ekran düzeniniz artık genel iki boyutlu sayfa yapısını tanımlamak için Grid API'yi kullanıyor. Aynı zamanda, liste öğelerini verimli bir şekilde geri dönüştürmek ve çalışma zamanı istisnalarını önlemek için minmax boyutlandırmayla esnek bir kanala LazyColumn yerleştiriyor.

Ek kaynaklar