Öğe özelliklerini ayarlama

Grid yapılandırması genel yapıyı tanımlarken bu yapıdaki öğelerin konumunu, kapsamını ve hizalamasını kontrol etmek için gridItem değiştiricisini kullanırsınız.

Öğe konumunu ayarlama

row ve column parametreleriyle bir öğeyi belirli bir parçaya veya hücreye yerleştirin.

row ve column parametreleri, öğenin yerleştirildiği satır ve sütun parça indekslerini belirtir. Parça dizinleri 1 tabanlıdır, yani 1 ile başlar. Yalnızca row veya column'ı (ikisini birden değil) belirtmek öğeyi, parçadaki bir sonraki kullanılabilir alana yerleştirir. İkisini de belirtmek öğeyi ilgili hücreye yerleştirir.

Başlangıçtan itibaren parça dizinini belirtmek için pozitif bir tam sayı kullanın. Örneğin, bir öğeyi ilk satıra ve sütuna yerleştirmek için gridItem(row = 1, column = 1) kullanın.

Parçayı sona göre belirtmek için negatif bir tam sayı kullanın. Örneğin, bir öğeyi sondan ikinci satıra ve sütuna yerleştirmek için gridItem(row = -2, column = -2) kullanın.

Aşağıdaki örnekte, 2 numaralı kart ikinci satır ve ikinci sütuna yerleştirilmiştir. 3 numaralı kart, son satıra (dizini -1) atanır. Bu satırda, ilgili parçadaki ilk kullanılabilir sütunu otomatik olarak kaplar (Şekil 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

Şekil 1. 2 numaralı kart, ikinci satır ve ikinci sütundaki ızgara hücresine, 3 numaralı kart ise üçüncü satırın ilk sütununa yerleştirilir.

Satır ve sütunları yayma

Bir öğenin birden fazla hücreye yayılması için rowSpan ve columnSpan parametrelerini kullanın. Bir kullanıcı arayüzü öğesini, birkaç ızgara hücresinden oluşan ızgara alanına yerleştirebilirsiniz. gridItem değiştiricisi, rowSpan ve columnSpan parametreleriyle ızgara alanını belirtmenize olanak tanır. Aşağıdaki örnekte, kart #1 iki satır ve iki sütundan oluşan alana yerleştirilmiştir (Şekil 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

Şekil 2. 4 numaralı kart üç sütunu kapsıyor.

Izgara alanında hizalamayı ayarlama

Kullanıcı arayüzü öğesinin bir ızgara alanındaki hizalamasını, gridItem değiştiricisinin alignment parametresinde belirterek ayarlayabilirsiniz. Aşağıdaki örnekte, #1, iki sütun ve iki satırdan oluşan ızgara alanının ortasına yerleştirilmiştir.

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

Şekil 3. #1 ile metin, iki satır ve iki sütundan oluşan ızgara alanının ortasına yerleştirilir.

Yerleştirilen öğelerle karıştırılmış otomatik yerleştirme

Grid konum belirtimi olmayan bir kullanıcı arayüzü öğesi otomatik yerleştirme işlemine tabi tutulur. Bu örnekte, otomatik yerleştirilen öğeleri ve kullanıcı arayüzü öğelerini belirtilen ızgara hücreleriyle nasıl karıştırabileceğiniz gösterilmektedir. Kart #2 ve kart #4 belirtilen ızgara hücreleridir, diğer öğeler ise otomatik olarak yerleştirilir.

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

Şekil 4. #3 numaralı kart, otomatik yerleştirme olduğu için #1 numaralı kartın yanına yerleştirilir.