Izgara tablo düzeni

Dört yıldız puanı simgesi

Bu tarifte, Grid API'nin geleneksel iç içe yerleştirilmiş yapılara kıyasla kodun okunabilirliğini nasıl artırdığı gösterilmektedir. Otomatik boyutlandırılmış parçaları yapılandırarak metin composable'larınızın iç boyutuna göre hücre genişliğine ve yüksekliğine dinamik olarak uyum sağlayan bir ızgara oluşturabilirsiniz.

Bu tarifte, Grid API'yi kullanarak bir tablo oluşturacaksınız.

Tablo 1. FlexBox ve Grid API'lerinin özellik karşılaştırması
Düzen Geç yükleme Yumuşak kaydırma Dinamik düzen güncellemesi
FlexBox 1G Hayır Evet Evet
Grid 2D Hayır Hayır Evet

En iyi uygulamalar

Tablonun okunabilirliğini ve sürdürülebilirliğini artırmak için Grid bileşenini kullanın. Grid, sütun boyutları ve tüm satırlardaki hizalama üzerinde hassas kontrol sağlar. Genişlikleri manuel olarak senkronize etmeniz gerekmez.

Malzemeler

  • Grid: Öğeleri iki boyutlu bir ızgaraya yerleştiren bir composable düzen. Düzen yapılandırması config lambda parametresinde, kullanıcı arayüzü içerik öğeleri ise content lambda parametresinde belirtilir.
  • GridTrackSize.Auto: Izgara yapılandırmasında, içeriğin gerçek boyutuna göre otomatik parça boyutlandırmayı belirtir (ör. column(GridTrackSize.Auto) ve row(GridTrackSize.Auto)).
  • gap(): GridConfigurationScope içinde satır ve sütun aralığını (ör. gap(row = 8.dp, column = 16.dp)) yapılandırır.

Adımlar

Tüm öğeler için otomatik sütun hizalama ve iz boyutu ayarlama özelliklerine sahip tek bir Grid düzeni kullanarak çok sütunlu bir karşılaştırma tablosu oluşturun.

1. Kanal boyutlarını belirlemek için kılavuz satırlarını ve sütunlarını sayma

Öncelikle, sütun ve satırlarınızı sayarak parçaların boyutunu belirleyin:

  • Sütunlar: Karşılaştırdığınız özelliklerin sayısı ve öğe adı için bir sütun.
  • Satırlar: Karşılaştırdığınız öğelerin sayısı ve bir başlık satırı.

Dört özellik genelinde iki bileşeni (FlexBox ve Grid) karşılaştıran bu formül için beş sütun ve üç satır gerekir.

2. Izgara kullanarak karşılaştırma tablosu uygulama

Tablo öğelerinizi düzenlemek için Grid kullanan bir TableInGrid composable oluşturun. Kanal boyutlarını tanımlamak için config lambda içinde column ve row işlevlerini çağırın ve gap() ile hücre aralığını ayarlayın. Metnin kendine özgü bir boyutu olduğundan GridTrackSize.Auto, sütunları ve satırları içeriklerine sığacak şekilde otomatik olarak boyutlandırır.

content lambda'sının içine tablo başlıklarınızı ve verilerinizi yerleştirin. Grid, tüm hücrelerin yerleşimini ve hizalamasını otomatik olarak yönetir:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Sonuçlar

Artık otomatik sütun hizalaması ve hücre aralığı içeren temiz, iki boyutlu bir karşılaştırma tablosu oluşturdunuz.

Şekil 1. Grid kullanan karşılaştırma tablosu.

Ek kaynaklar