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 jalur relatif terhadap akhir. Misalnya, untuk menempatkan item di baris dan kolom kedua dari terakhir, gunakan gridItem(row = -2, column = -2).

Pada 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

Rentang baris dan kolom

Gunakan parameter rowSpan dan columnSpan untuk merentangkan item ke beberapa sel. Anda dapat menempatkan elemen UI ke area petak, yang merupakan 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 menetapkan perataan elemen UI di area petak dengan menentukannya dalam parameter alignment pengubah gridItem. Pada 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 dicampur dengan item yang ditempatkan

Elemen UI di Grid yang tidak memiliki spesifikasi posisi akan menjalani penempatan otomatis. Contoh ini menunjukkan cara mencampur elemen yang ditempatkan secara 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