Izgarada tembel listeler

Dört yıldızlı değerlendirme simgesi

Grid birleştirilebilir öğesi, 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ış parçaları (satırlar ve sütunlar) ve boşlukları kullanarak duyarlı bir düzen yapısı tanımlar.

Grid, tembel yükleme kapsayıcısı değil 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. Sonuç olarak, büyük veya dinamik veri kümelerinin doğrudan bir Grid içinde oluşturulması, tüm öğeler aynı anda oluşturulduğu için performansta darboğazlara neden olabilir.

Yapılandırılmış bir ekran düzeninde büyük veri koleksiyonlarını görüntülemek için Grid hücrelerinize LazyColumn veya LazyRow gibi tembel bileşenleri yerleştirin. Ancak esnek parçaların (1.fr gibi özelliklere sahip) alt öğelerin doğal boyutlarını sorguladığını unutmayın. SubcomposeLayout, doğal ölçüm geçişlerini desteklemediğinden esnek bir parçanın içine tembel liste yerleştirmek IllegalStateException kilitlenmesine neden olur. Tembel listeleri esnek bir ızgara parçasının içine güvenli bir şekilde yerleştirmek için, doğal ölçüm adımını atlamak üzere GridTrackSize.MinMax boyutlandırmayı (ör. minmax(0.dp, 1.fr)) kullanmanız gerekir.

Üstte bir başlık, ana içerik alanında kaydırılabilir bir öğe listesi ve altta bir altbilgi bulunan ekran düzeni.
Şekil 1. Üstbilgi, altbilgi ve içerik için yerleştirilmiş bir LazyColumn ile yapısal ekran düzeni.

En iyi uygulamalar

  • Büyük açık döngüler yerine tembel 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 tembel bileşenler (genellikle LazyColumn veya LazyRow) yerleştirin. Çünkü Grid öğeleri geri dönüştürmez ve 1.000 parça sınırı vardır.
  • Tembel listeler için MinMax parça boyutlandırmayı kullanın: LazyColumn ve LazyRow, doğal ölçüm geçişlerini desteklemediğinden (SubcomposeLayout bölümüne bakın), doğal ölçümleri güvenli bir şekilde atlamak için tembel bileşenleri barındıran esnek parçalarda GridTrackSize.MinMax kullanın.

Malzemeler

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

Adımlar

Anlamsal alan tanımlayıcıları tanımlayarak, tembel liste uyumluluğu için minmax boyutlandırmasıyla ızgara parçalarını yapılandırarak ve LazyColumn öğesini ızgara içerik alanına yerleştirerek ekran düzeninizi yapılandırın.

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

Ekran düzeninizin farklı bölgelerini temsil etmek için 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'sı tanımlayın. Başlık ve altbilgi satırlarının içerik boyutlarına uyması için GridTrackSize.MaxContent, tembel listeyi barındıran içerik parçasının, desteklenmeyen doğal ölçümler sorgulanmadan esnek alan ayırması için 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

Composable'ınızda lazyConfig öğesini Grid kapsayıcısına iletin. content lambda'sının içine statik bileşenler (Header ve Footer) yerleştirin ve bunları Modifier.gridItem() ile ilgili alan tanımlayıcılarıyla birlikte 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 izi 1. adımda minmax(0.dp, 1.fr) ile yapılandırıldığından, LazyColumn, desteklenmeyen doğal 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'sini kullanırken liste öğelerini verimli bir şekilde yeniden kullanmak ve çalışma zamanı istisnalarını önlemek için minmax boyutlandırmasıyla esnek bir parçaya LazyColumn yerleştiriyor.

Ek kaynaklar