Öğe özelliklerini ayarlama

Grid yapılandırması genel yapıyı tanımlarken bu yapıdaki öğelerin konumunu, kapsaması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. Koordinat indeksleri, basit ızgara düzenleri için en iyi sonucu verir. Daha büyük veya daha karmaşık düzenler için bunun yerine adlandırılmış alanlar tanımlayın.

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'den başlar. Yalnızca row veya column'yi (ikisini birden değil) belirtmek öğeyi, parçadaki bir sonraki kullanılabilir alana yerleştirir. Her ikisini 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. Kart #3, son satıra (dizine göre -1) atanır. Burada, bu 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ı yayma

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, rowSpan ve columnSpan parametreleriyle ızgara alanını belirtmenize olanak tanır. Aşağıdaki örnekte, #1 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

Bir ızgara alanındaki kullanıcı arayüzü öğesinin 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şim

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. 2 numaralı kart ve 4 numaralı kart, belirtilen ızgara hücrelerine yerleştirilir. 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