Öğ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'nin (ikisi birden değil) belirtilmesi, öğeyi bu parçadaki bir sonraki boş alana yerleştirir. İkisini de belirtmek öğeyi ilgili hücreye yerleştirir.

Parça dizinini başlangıçtan itibaren 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

Satır ve sütunları birleştirme

Bir öğeyi birden fazla hücreye yaymak 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, ızgara alanını rowSpan ve columnSpan parametreleriyle belirtmenize olanak tanır. Aşağıdaki örnekte, 1 numaralı kart, 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

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

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 belirtilen ızgara hücrelerine sahip kullanıcı arayüzü öğelerini nasıl karıştırabileceğiniz gösterilmektedir. Kart #2 ve Kart #4 belirtilen ızgara hücrelerine yerleştirilir ve diğer öğeler 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