Overlay elemen UI dengan Petak

Jetpack Compose Grid API dirancang untuk tata letak layar dua dimensi yang bersifat struktural. Tidak seperti petak lambat, yang dioptimalkan untuk set data besar, Grid memungkinkan Anda menentukan struktur tata letak tetap atau responsif menggunakan jalur (baris dan kolom), jarak, dan area petak. Anda menempatkan item ke dalam struktur ini menggunakan Modifier.gridItem, yang memberi Anda kontrol eksplisit atas pemosisian dan rentang dalam penampung petak.

Jika UI Anda memerlukan beberapa item di area petak yang sama atau area yang tumpang-tindih—seperti overlay badge, indikator status, atau kartu berlapis—koordinasi ambiguitas dapat membuat perilaku tata letak tidak dapat diprediksi. Mengelola kedalaman komponen yang tumpang-tindih tanpa menggunakan Boxpenyusunan bertingkat yang kompleks atau offset koordinat manual sangat penting untuk mempertahankan kode tata letak yang bersih dan mudah dibaca.

Praktik terbaik

• Urutan deklarasi: Grid mengikuti urutan zIndex standar berdasarkan urutan deklarasi dalam blok Grid. Item yang dideklarasikan kemudian dalam blok konten Grid dirender di atas item yang dideklarasikan sebelumnya.
• Kontrol z-index eksplisit: Gunakan Modifier.zIndex jika Anda perlu mengontrol atau mengganti urutan gambar default elemen yang tumpang-tindih secara eksplisit.
• Area bernama vs. overlay item: Gunakan Grid dan area bernama untuk menentukan struktur tata letak Anda, tetapi simpan logika overlay yang rumit di dalam gridItem tertentu jika overlay tersebut terkait secara logis dengan sel petak tersebut.
• Rentang yang disengaja untuk overlay: Saat melakukan overlay, pastikan parameter rowSpan dan columnSpan disengaja untuk elemen yang tumpang-tindih guna mengontrol seberapa banyak konten yang mendasarinya terhalang.

Bahan

• Grid: Penampung tata letak dua dimensi struktural
• GridConfigurationScope.area: Fungsi cakupan yang digunakan untuk menentukan area bernama dan area overlay di seluruh jalur petak
• Modifier.gridItem: Pengubah yang digunakan untuk menempatkan dan merentangkan composable di seluruh jalur petak atau ke dalam area petak bernama
• Modifier.zIndex: Pengubah yang digunakan untuk mengontrol secara eksplisit urutan elevasi lapisan dan gambar

Langkah

Konfigurasi tata letak petak dan area bernama, posisikan konten lapisan dasar dalam koordinat petak target, dan tempatkan elemen overlay dalam sel petak bersama atau area yang tumpang-tindih.

1. Menentukan konfigurasi petak

Buat konfigurasi composable Grid yang menentukan jalur baris dan kolom, serta area bernama yang mencakup sel untuk menentukan wilayah overlay:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Tempatkan konten dasar dan deklarasikan overlay

Tempatkan composable dasar Anda di sel petak menggunakan Modifier.gridItem. Grid mengikuti urutan zIndex standar berdasarkan urutan komposisi, sehingga item yang dideklarasikan lebih lanjut dalam blok Grid digambar di atas item sebelumnya. Saat menempatkan overlay di sel yang sama atau area yang tumpang-tindih, deklarasikan composable overlay setelah elemen dasar, atau referensikan area bernama. Anda dapat menggunakan Modifier.zIndex jika perlu mengontrol atau mengganti urutan gambar default ini secara eksplisit.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Hasil

Elemen UI Anda ditumpuk secara terprediksi dalam struktur petak 2D. Dengan mengandalkan pengurutan deklarasi standar, Anda dapat menghindari penampung bertingkat yang kompleks sekaligus mempertahankan kode tata letak yang bersih dan responsif.