Daftar lambat dalam Petak

Composable Grid membuat tata letak layar dua dimensi yang terstruktur. Grid menentukan struktur tata letak responsif menggunakan jalur (baris dan kolom) dan ruang yang ditentukan secara eksplisit sebagai arsitektur dasar UI Anda.

Karena Grid adalah penampung struktural, bukan pemuatan lambat, Anda harus menentukan setiap elemen yang ditempatkan di dalamnya secara eksplisit tanpa mendaur ulang item saat men-scroll. Akibatnya, merender set data besar atau dinamis secara langsung dalam Grid dapat menyebabkan hambatan performa karena semua item disusun secara bersamaan.

Untuk menampilkan kumpulan data besar dalam tata letak layar terstruktur, sematkan komponen yang dimuat secara lambat seperti LazyColumn atau LazyRow di sel Grid. Namun, perhatikan: jalur fleksibel (dengan spesifikasi seperti 1.fr) mengkueri ukuran intrinsik elemen turunan. Karena SubcomposeLayout tidak mendukung penerusan pengukuran intrinsik, menempatkan daftar lambat di dalam jalur fleksibel menyebabkan error IllegalStateException. Untuk menempatkan daftar lambat dengan aman di dalam jalur petak fleksibel, Anda harus menggunakan ukuran GridTrackSize.MinMax (seperti minmax(0.dp, 1.fr)) untuk melewati proses pengukuran intrinsik.

Praktik terbaik

• Gunakan daftar lambat, bukan loop eksplisit besar: Untuk menampilkan set data besar atau dinamis dalam Grid terstruktur, sematkan komponen lambat (biasanya LazyColumn atau LazyRow) di dalam sel petak tertentu, bukan membuat loop eksplisit besar pada item, karena Grid tidak mendaur ulang item dan memiliki batas 1.000 jalur.
• Gunakan ukuran trek MinMax untuk daftar lambat: Karena LazyColumn dan LazyRow tidak mendukung penerusan pengukuran intrinsik (lihat SubcomposeLayout), gunakan GridTrackSize.MinMax pada trek fleksibel yang menghosting komponen lambat untuk melewati pengukuran intrinsik dengan aman.

Bahan

• Grid: Tata letak composable yang menempatkan item dalam struktur petak dua dimensi yang dikonfigurasi menggunakan jalur baris dan kolom eksplisit.
• LazyColumn: Daftar yang men-scroll secara vertikal yang hanya menyusun dan mendaur ulang item yang saat ini terlihat di layar.
• GridTrackSize.MinMax: Properti pengubahan ukuran jalur yang menentukan batas fleksibel (min dan max) untuk menghosting komponen yang dimuat lambat dengan aman tanpa memicu error pengukuran runtime.
• gridItem: Ekstensi Compose Modifier yang menetapkan elemen UI turunan ke sel tertentu atau area bernama di dalam Grid.

Langkah

Susun tata letak layar Anda dengan menentukan ID area semantik, mengonfigurasi jalur petak dengan ukuran minmax untuk kompatibilitas daftar lambat, dan menyematkan LazyColumn di dalam area konten petak.

1. Mengonfigurasi jalur petak dan area bernama

Buat class enum untuk merepresentasikan area berbeda dari tata letak layar Anda, dan tentukan lambda GridConfigurationScope untuk jalur tata letak dan area bernama. Gunakan GridTrackSize.MaxContent untuk baris header dan footer agar sesuai dengan dimensi kontennya, dan gunakan minmax(0.dp, 1.fr) untuk jalur konten yang menghosting daftar lambat untuk mengalokasikan ruang fleksibel tanpa mengkueri pengukuran intrinsik yang tidak didukung:

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)
}
GridByExamples.kt

2. Menempatkan komponen statis di Petak

Di composable Anda, teruskan lazyConfig ke penampung Grid. Di dalam lambda content, tempatkan komponen statis (Header dan Footer) dan posisikan menggunakan Modifier.gridItem() dengan ID area masing-masing.

3. Menyematkan LazyColumn di area konten

Di sel konten, sematkan LazyColumn menggunakan Modifier.gridItem(ScreenArea.Content). Karena jalur konten dikonfigurasi dengan minmax(0.dp, 1.fr) di Langkah 1, LazyColumn dapat mengukur dan mendaur ulang item dengan aman saat men-scroll tanpa mengkueri dimensi intrinsik yang tidak didukung:

@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))
            }
        }
    }
}
GridByExamples.kt

Hasil

Tata letak layar Anda kini menggunakan Grid API untuk menentukan struktur halaman dua dimensi secara keseluruhan, sekaligus menyematkan LazyColumn dalam jalur fleksibel dengan penskalaan minmax untuk mendaur ulang item daftar secara efisien dan menghindari pengecualian runtime.

Referensi lainnya

• Petak di Jetpack Compose
• Menetapkan properti penampung
• Daftar lambat dan petak lambat