Menetapkan properti penampung

Anda dapat menentukan konfigurasi penampung Petak untuk membuat tata letak fleksibel yang merespons berbagai ukuran layar dan jenis konten. Halaman ini menjelaskan cara melakukan hal berikut:

Menentukan petak

Petak terdiri dari kolom dan baris. Composable Grid memiliki parameter config yang menerima lambda untuk menentukan kolom dan baris dalam GridConfigurationScope. Contoh berikut menentukan petak yang memiliki tiga baris dan dua kolom, masing-masing dengan ukuran tetap yang ditentukan dalam Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Menempatkan item dalam petak

Grid mengambil elemen UI dalam lambda content dan menempatkannya ke dalam sel petak. Petak mengatur item terlepas dari apakah Anda telah menentukan baris dan kolom secara eksplisit. Secara default, Grid mencoba menempatkan elemen UI di sel petak yang tersedia di baris; jika tidak dapat, Grid akan menempatkannya di sel petak yang tersedia di baris berikutnya. Jika tidak ada sel kosong, Grid akan membuat baris baru.

Dalam contoh berikut, petak memiliki enam sel petak dan menempatkan kartu ke setiap sel (Gambar 1). Setiap sel petak berukuran 160dp x 90dp, sehingga total ukuran petak adalah 320dp x 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Enam kartu ditempatkan dalam petak yang memiliki tiga baris dan dua kolom.
Gambar 1. Enam kartu ditempatkan dalam petak yang memiliki tiga baris dan dua kolom.

Untuk mengubah perilaku default ini menjadi pengisian menurut kolom, tetapkan properti flow ke GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Fungsi flow mengubah arah untuk menempatkan item.
Gambar 2. GridFlow.Row (kiri) dan GridFlow.Column (kanan).

Mengelola ukuran trek

Baris dan kolom secara kolektif disebut sebagai jalur petak. Anda dapat menentukan ukuran jalur petak menggunakan salah satu metode berikut:

  • Tetap (Dp): Mengalokasikan ukuran tertentu (misalnya, column(180.dp)).
  • Pecahan (Float): Mengalokasikan persentase total ruang yang tersedia dari 0.0f hingga 1.0f (misalnya, row(0.5f) untuk 50%).
  • Fleksibel (Fr): Mendistribusikan ruang yang tersisa secara proporsional setelah jalur tetap dan pecahan dihitung. Misalnya, jika dua baris disetel ke 1.fr dan 3.fr, baris terakhir akan menerima 75% dari tinggi yang tersisa.
  • Intrinsik: Mengatur ukuran jalur berdasarkan konten di dalamnya. Untuk mengetahui informasi selengkapnya, lihat Menentukan ukuran jalur petak secara intrinsik.

Contoh berikut menggunakan berbagai opsi ukuran trek untuk menentukan tinggi baris:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Tinggi baris ditentukan menggunakan empat opsi ukuran trek utama.
Gambar 3. Tinggi baris ditentukan menggunakan empat opsi ukuran trek utama di Grid.

Menentukan ukuran jalur petak secara intrinsik

Anda dapat menggunakan pengukuran intrinsik untuk Grid jika Anda ingin tata letak beradaptasi dengan konten, daripada memaksanya masuk ke dalam penampung tetap. Ukuran jalur petak ditentukan dengan nilai berikut:

  • GridTrackSize.MaxContent: Gunakan ukuran intrinsik maksimum konten (misalnya, lebar ditentukan oleh panjang penuh teks dalam blok teks tanpa pengemasan).
  • GridTrackSize.MinContent: Menggunakan ukuran intrinsik minimum konten (misalnya, lebar ditentukan oleh satu kata terpanjang dalam blok teks).
  • GridTrackSize.Auto: Gunakan ukuran fleksibel untuk jalur yang beradaptasi berdasarkan ruang yang tersedia. Secara default, berperilaku seperti MaxContent, tetapi mengecilkan dan membungkus kontennya agar sesuai dengan penampung induk.

Contoh berikut menempatkan dua teks berdampingan. Ukuran kolom untuk teks pertama ditentukan oleh lebar minimum yang diperlukan untuk menampilkan teks, dan lebar kolom kedua bergantung pada lebar maksimum teks yang diperlukan.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Ukuran intrinsik yang ditentukan dalam kolom.
Gambar 4. Ukuran intrinsik yang ditentukan dalam kolom.

Menetapkan jarak antar-baris dan kolom

Setelah ukuran trek petak ditentukan, Anda dapat mengubah jarak petak untuk menyempurnakan jarak antar-trek. Anda dapat menentukan jarak kolom dengan fungsi columnGap, dan jarak baris dengan rowGap. Dalam contoh berikut, ada jarak 16dp di antara setiap baris, dan jarak 8dp di antara setiap kolom (Gambar 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Jarak antar-baris dan kolom.
Gambar 5. Jarak antar-baris dan kolom.

Anda juga dapat menggunakan fungsi praktis gap untuk menentukan celah dengan ukuran kolom dan baris yang sama, serta untuk menentukan ukuran kolom dan celah secara terpisah menggunakan satu fungsi. Kode berikut menambahkan celah 8dp ke petak:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Sebelumnya
Mulai
Berikutnya
Menetapkan properti item