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: Menyiapkan struktur dasar baris dan kolom.
• Menempatkan item dalam petak: Memahami cara item ditempatkan ke dalam sel petak dan cara mengubah arah aliran.
• Mengelola ukuran jalur: Menggunakan ukuran tetap, persentase, fleksibel, dan intrinsik untuk menetapkan ukuran jalur.
• Menetapkan celah: Mengelola "gutter" antara baris dan kolom.

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 menata 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, elemen UI akan ditempatkan 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 dalam setiap sel (Gambar 1). Setiap sel petak berukuran 160dp x 90dp, sehingga ukuran petak total menjadi 320dp x 270dp.

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

Untuk mengubah perilaku default ini menjadi pengisian berdasarkan 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

Mengelola ukuran jalur

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)).
• Persentase (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 persentase dihitung. Misalnya, jika dua baris ditetapkan ke 1.fr dan 3.fr, baris kedua akan menerima 75% dari tinggi yang tersisa.
• Intrinsik: Mengukur jalur berdasarkan konten di dalamnya. Untuk mengetahui informasi selengkapnya, lihat Menentukan ukuran jalur petak secara intrinsik.

Contoh berikut menggunakan opsi ukuran jalur yang berbeda 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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

Menentukan ukuran jalur petak secara intrinsik

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

• GridTrackSize.MaxContent: Menggunakan ukuran intrinsik maksimum konten (misalnya, lebar ditentukan oleh panjang teks lengkap dalam blok teks tanpa wrapping).
• GridTrackSize.MinContent: Menggunakan ukuran intrinsik minimum konten (misalnya, lebar ditentukan oleh satu kata terpanjang dalam blok teks).
• GridTrackSize.Auto: Menggunakan ukuran fleksibel untuk jalur yang beradaptasi berdasarkan ruang yang tersedia. Secara default, ukuran ini berperilaku seperti MaxContent, tetapi menyusut dan menggabungkan 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

Menetapkan celah antara baris dan kolom

Setelah ukuran jalur petak ditetapkan, Anda dapat mengubah celah petak untuk menyempurnakan jarak antara jalur. Anda dapat menentukan celah kolom dengan fungsi columnGap, dan celah baris dengan rowGap. Dalam contoh berikut, terdapat celah 16dp antara setiap baris, dan celah 8dp 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

Anda juga dapat menggunakan fungsi praktis gap untuk menentukan celah dengan ukuran kolom dan baris yang sama, serta 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