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 jalur atau sel tertentu dengan parameter row dan column.

Parameter row dan column menentukan indeks jalur baris dan kolom tempat item ditempatkan. Indeks jalur berbasis 1—dimulai dari satu. Menentukan hanya row atau column (tidak 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 jalur dari awal. Misalnya, untuk menempatkan item di baris dan kolom pertama, gunakan gridItem(row = 1, column = 1).

Gunakan bilangan bulat negatif untuk menentukan trek 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), yang secara 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

Mencakup baris dan kolom

Gunakan parameter rowSpan dan columnSpan untuk merentangkan item di beberapa sel. Anda dapat menempatkan elemen UI ke dalam area petak, yaitu area yang terdiri dari beberapa sel petak. Pengubah gridItem memungkinkan Anda menentukan area petak dengan parameter rowSpan dan columnSpan. Pada 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 menyetel 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 yang digabungkan dengan item yang ditempatkan

Elemen UI di Grid yang tidak memiliki spesifikasi posisi akan ditempatkan secara otomatis. Contoh ini menunjukkan cara Anda dapat memadukan elemen yang ditempatkan otomatis dan elemen UI dengan sel petak yang ditentukan. Kartu #2 dan kartu #4 adalah 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