Menetapkan properti item

Meskipun konfigurasi Grid menentukan struktur keseluruhan, Anda menggunakan pengubah gridItem untuk mengontrol posisi, rentang, dan perataan item dalam struktur tersebut.

Menetapkan posisi item

Tempatkan item ke dalam trek atau sel tertentu dengan parameter row dan column. Indeks koordinat berfungsi paling baik untuk tata letak petak yang sederhana. Untuk tata letak yang lebih besar atau lebih kompleks, tentukan area bernama.

Parameter row dan column menentukan indeks jalur baris dan kolom tempat item ditempatkan. Indeks trek berbasis 1—dimulai dari satu. Menentukan hanya row atau column (bukan keduanya) akan menempatkan item di ruang berikutnya yang tersedia di jalur tersebut. Menentukan keduanya akan menempatkan item ke dalam sel tersebut.

Gunakan bilangan bulat positif untuk menentukan indeks trek dari awal. Misalnya, untuk menempatkan item di baris dan kolom pertama, gunakan gridItem(row = 1, column = 1).

Gunakan bilangan bulat negatif untuk menentukan trek yang relatif terhadap akhir. Misalnya, untuk menempatkan item di baris dan kolom kedua dari terakhir, gunakan gridItem(row = -2, column = -2).

Dalam contoh berikut, Kartu #2 ditempatkan di baris kedua dan kolom kedua. Kartu #3 ditetapkan ke baris terakhir (diindeks oleh -1), tempat kartu tersebut otomatis menempati kolom pertama yang tersedia di jalur tersebut (Gambar 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

Merentangkan baris dan kolom

Gunakan parameter rowSpan dan columnSpan untuk merentangkan item di beberapa sel. Anda dapat menempatkan elemen UI ke dalam area petak, yang merupakan area yang terdiri dari beberapa sel petak. Pengubah gridItem memungkinkan Anda menentukan area petak dengan parameter rowSpan dan columnSpan. Dalam contoh berikut, Kartu #1 ditempatkan di area yang terdiri dari dua baris dan dua kolom (Gambar 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Menetapkan perataan di area petak

Anda dapat menetapkan perataan elemen UI di area petak dengan menentukannya dalam parameter alignment pengubah gridItem. Dalam contoh berikut, #1 ditempatkan di tengah area petak yang terdiri dari dua kolom dan dua baris.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Penempatan otomatis digabungkan dengan item yang ditempatkan

Elemen UI di Grid yang tidak memiliki spesifikasi posisi akan menjalani penempatan otomatis. Contoh ini menunjukkan cara menggabungkan elemen yang ditempatkan secara otomatis dan elemen UI dengan sel petak yang ditentukan. Kartu #2 dan Kartu #4 ditempatkan di sel petak yang ditentukan, dan item lainnya ditempatkan secara otomatis.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt