Izgara tablo düzeni

Dört yıldızlı değerlendirme simgesi

Bu tarifte, Grid API'nin, geleneksel iç içe yerleştirilmiş yapılara kıyasla kod okunabilirliğini nasıl iyileştirdiği gösterilmektedir. Otomatik boyutlandırılmış parçaları yapılandırarak, metin composable'larınızın doğal 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'sini 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 sarmalama 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 composable'ını kullanın. Grid, genişlikleri manuel olarak senkronize etmeden tüm satırlarda sütun boyutları ve hizalama üzerinde hassas kontrol sağlar.

Malzemeler

  • Grid: Öğeleri iki boyutlu bir ızgaraya yerleştiren, birleştirilebilir düzen. Düzen yapılandırması config lambda parametresinin içinde belirtilirken kullanıcı arayüzü içerik öğeleri content lambda parametresinin içinde tanımlanır.
  • GridTrackSize.Auto: İçeriğin doğal boyutuna göre (ör. column(GridTrackSize.Auto) ve row(GridTrackSize.Auto)) ızgara yapılandırmasında otomatik parça boyutlandırmayı belirtir.
  • gap(): GridConfigurationScope içindeki 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 parça boyutlandırma özelliklerine sahip tek bir Grid düzen kullanarak çok sütunlu bir karşılaştırma tablosu oluşturun.

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

Öncelikle, parçaların boyutunu belirlemek için sütun ve satırlarınızı sayın:

  • 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 üstbilgi satırı.

Bu tarifte, dört özellik açısından iki bileşen (FlexBox ve Grid) karşılaştırılıyor. Bu nedenle, beş sütun ve üç satır gerekir.

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

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

content lambda'nın içine tablo başlıklarınızı ve verilerinizi yerleştirin. Grid tüm hücrelerin yerleştirilmesini ve hizalanmasını otomatik olarak işler:

@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 hizalama ve hücre aralığı içeren temiz, iki boyutlu bir karşılaştırma tablosu oluşturdunuz.

Şekil 1. Grid kullanılarak oluşturulan karşılaştırma tablosu.

Ek kaynaklar