Daftar lambat dalam Petak

Ikon rating bintang empat

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

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

Untuk menampilkan kumpulan data besar dalam tata letak layar terstruktur, sematkan komponen lambat seperti LazyColumn atau LazyRow di sel Grid Anda. 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 akan menyebabkan error IllegalStateException. Untuk menempatkan daftar lambat di dalam jalur petak fleksibel dengan aman, Anda harus menggunakan ukuran GridTrackSize.MinMax (seperti minmax(0.dp, 1.fr)) untuk mengabaikan penerusan pengukuran intrinsik.

Tata letak layar dengan Header di bagian atas, daftar item yang dapat di-scroll di area konten utama, dan Footer di bagian bawah.
Gambar 1. Tata letak layar struktural dengan header, footer, dan LazyColumn tersemat untuk konten.

Praktik terbaik

  • Gunakan daftar lazy, bukan loop eksplisit yang besar: Untuk menampilkan set data yang besar atau dinamis dalam Grid terstruktur, sematkan komponen lazy (biasanya LazyColumn atau LazyRow) di dalam sel petak tertentu, bukan membuat loop eksplisit yang besar pada item, karena Grid tidak mendaur ulang item dan memiliki batas 1.000 trek.
  • Gunakan ukuran jalur MinMax untuk daftar lazy: Karena LazyColumn dan LazyRow tidak mendukung penerusan pengukuran intrinsik (lihat SubcomposeLayout), gunakan GridTrackSize.MinMax pada jalur fleksibel yang menghosting komponen lazy untuk mengabaikan 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 scroll vertikal yang hanya membuat dan mendaur ulang item yang saat ini terlihat di layar.
  • GridTrackSize.MinMax: Properti ukuran jalur yang menentukan batas fleksibel (min dan max) untuk menghosting komponen 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

Atur 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 berbagai region tata letak layar, 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 guna 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)
}

2. Menempatkan komponen statis di Grid

Dalam 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 di-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))
            }
        }
    }
}

Hasil

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

Referensi lainnya