Öğe özelliklerini ayarlama

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

Öğe konumunu ayarlama

row ve column parametrelerini kullanarak bir öğeyi belirli bir kanala veya hücreye yerleştirin. Koordinat dizinleri, basit ızgara düzenlerinde en iyi sonucu verir. Daha büyük veya daha karmaşık düzenler için adlandırılmış alanlar tanımlayın.

row ve column parametreleri, öğenin yerleştirildiği satır ve sütun izleme dizinlerini belirtir. Parça dizinleri 1 tabanlıdır, yani 1'den başlar. Yalnızca row veya column (ikisi birden değil) belirtildiğinde öğe, ilgili kanaldaki bir sonraki kullanılabilir alana yerleştirilir. Her ikisini de belirtmek, öğeyi ilgili hücreye yerleştirir.

Parça dizinini baştan 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. kart ikinci satır ve ikinci sütuna yerleştirilmiştir. 3 numaralı kart, son satıra (-1 diziniyle) atanır ve bu kanaldaki 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. Kullanıcı arayüzü öğelerini, birden fazla ızgara hücresinden oluşan ızgara alanlarına yerleştirebilirsiniz. gridItem değiştiricisi, rowSpan ve columnSpan parametreleriyle ızgara alanını 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 hizalamasını, gridItem değiştiricisinin alignment parametresinde belirterek bir ızgara alanında 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ışık otomatik yerleşim

Grid uygulamasında konum belirtimi olmayan bir kullanıcı arayüzü öğesi otomatik olarak yerleştirilir. Bu örnekte, otomatik olarak yerleştirilen öğeler ile belirtilen ızgara hücrelerine sahip kullanıcı arayüzü öğelerini nasıl karıştırabileceğiniz gösterilmektedir. 2 ve 4 numaralı kartlar 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