Kapsayıcı özelliklerini ayarlama

Farklı ekran boyutlarına ve içerik türlerine yanıt veren esnek düzenler oluşturmak için bir ızgara kapsayıcı yapılandırması tanımlayabilirsiniz. Bu sayfada aşağıdakilerin nasıl yapılacağı açıklanmaktadır:

• Izgara tanımlama: Satır ve sütunların temel yapısını oluşturun.
• Öğeleri ızgaraya yerleştirme: Öğelerin ızgara hücrelerine nasıl yerleştirildiğini ve akış yönünün nasıl değiştirileceğini öğrenin.
• Parça boyutunu yönetme: Parça boyutlarını ayarlamak için sabit, yüzdelik, esnek ve doğal boyutlandırma kullanın.
• Boşlukları ayarlama: Satırlar ve sütunlar arasındaki "olukları" yönetin.

Izgara tanımlama

Tablolar sütun ve satırlardan oluşur. Grid composable'da, GridConfigurationScope içinde sütun ve satırları tanımlamak için lambda kabul eden bir config parametresi bulunur. Aşağıdaki örnekte, her biri Dp içinde belirtilen sabit boyuta sahip üç satır ve iki sütundan oluşan bir tablo tanımlanmaktadır:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Öğeleri ızgaraya yerleştirme

Grid, content lambda'sındaki kullanıcı arayüzü öğelerini alır ve bunları ızgara hücrelerine yerleştirir. Izgara, satırları ve sütunları açıkça tanımlayıp tanımlamadığınızdan bağımsız olarak öğeleri yerleştirir. Varsayılan olarak, Grid bir kullanıcı arayüzü öğesini satırdaki kullanılabilir ızgara hücresine yerleştirmeye çalışır; başarılı olamazsa bir sonraki satırdaki kullanılabilir ızgara hücresine yerleştirir. Boş hücre yoksa Grid yeni bir satır oluşturur.

Aşağıdaki örnekte, ızgarada altı ızgara hücresi vardır ve her birine bir kart yerleştirilmiştir (Şekil 1). Her ızgara hücresi 160dp x 90dp boyutundadır ve toplam ızgara boyutu 320dp x 270dp'tür.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Bu varsayılan davranışı sütuna göre doldurma olarak değiştirmek için flow özelliğini GridFlow.Column olarak ayarlayın.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Parça boyutlandırmasını yönetme

Satırlar ve sütunlar toplu olarak ızgara parçası olarak adlandırılır. Bir ızgara parçasının boyutunu aşağıdaki yöntemlerden birini kullanarak belirtebilirsiniz:

• Sabit (Dp): Belirli bir boyut (ör. column(180.dp)) ayırır.
• Yüzde (Float): 0.0f'ten 1.0f'e toplam kullanılabilir alanın bir yüzdesini ayırır (ör. %50 için row(0.5f)).
• Esnek (Fr): Sabit ve yüzdelik parçalar hesaplandıktan sonra kalan alanı orantılı olarak dağıtır. Örneğin, iki satır 1.fr ve 3.fr olarak ayarlanırsa ikincisi kalan yüksekliğin% 75'ini alır.
• İçerik tabanlı: Parçayı içindeki içeriğe göre boyutlandırır. Daha fazla bilgi için Izgara parça boyutunu doğal olarak belirleme başlıklı makaleyi inceleyin.

Aşağıdaki örnekte, satır yüksekliklerini tanımlamak için farklı parça boyutlandırma seçenekleri kullanılmaktadır:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

Kılavuz yol boyutunu doğal olarak belirleme

Düzenin, sabit bir kapsayıcıya zorlamak yerine içeriğe uyum sağlamasını istediğinizde Grid için içsel boyutlandırma kullanabilirsiniz. Izgara parçası boyutu aşağıdaki değerlerle belirlenir:

• GridTrackSize.MaxContent: İçeriğin maksimum doğal boyutunu kullanın (ör. genişlik, kaydırma içermeyen bir metin bloğundaki metnin tam uzunluğuna göre belirlenir).
• GridTrackSize.MinContent: İçeriğin minimum doğal boyutunu kullanın (ör. genişlik, bir metin bloğundaki en uzun tek kelimeye göre belirlenir).
• GridTrackSize.Auto: Mevcut alana göre uyum sağlayan bir parça için esnek boyut kullanın. Varsayılan olarak MaxContent gibi davranır ancak içeriğini üst kapsayıcıya sığacak şekilde küçültür ve sarar.

Aşağıdaki örnekte iki metin yan yana yerleştirilmiştir. İlk metnin sütun boyutu, metni görüntülemek için gereken minimum genişliğe göre belirlenir. İkinci sütunun genişliği ise metnin gereken maksimum genişliğine bağlıdır.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet.")
}
GridTrackSize.kt

Satırlar ve sütunlar arasındaki boşlukları ayarlama

Izgara parçalarınız boyutlandırıldıktan sonra, parçalar arasındaki boşluğu hassaslaştırmak için ızgara boşluğunu değiştirebilirsiniz. Sütun aralığını columnGap işleviyle, satır aralığını ise rowGap ile belirtebilirsiniz. Aşağıdaki örnekte, her satır arasında 16dp, her sütun arasında ise 8dp boşluk vardır (Şekil 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Aynı sütun ve satır boyutundaki boşlukları tanımlamak ve tek bir işlev kullanarak sütun ve boşluk boyutlarını ayrı ayrı tanımlamak için gap kolaylık işlevini de kullanabilirsiniz. Aşağıdaki kod, ızgaraya 8dp boşluk ekler:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt