Tata letak tabel petak

Ikon rating bintang empat

Resep ini menunjukkan cara Grid API meningkatkan keterbacaan kode dibandingkan dengan struktur bertingkat tradisional. Dengan mengonfigurasi trek berukuran otomatis, Anda dapat membuat petak yang beradaptasi secara dinamis dengan lebar dan tinggi sel berdasarkan ukuran intrinsik composable teks Anda.

Dalam resep ini, Anda akan membuat tabel menggunakan Grid API.

Tabel 1. Perbandingan fitur API FlexBox dan Grid
Tata Letak Pemuatan lambat Soft wrap Pembaruan tata letak dinamis
FlexBox 1D Tidak Ya Ya
Grid 2D Tidak Tidak Ya

Praktik terbaik

Gunakan composable Grid untuk meningkatkan keterbacaan dan kemudahan pengelolaan tabel. Grid memberi Anda kontrol yang akurat atas dimensi dan perataan kolom di semua baris tanpa menyinkronkan lebar secara manual.

Bahan

  • Grid: Tata letak composable yang menempatkan item dalam petak dua dimensi. Konfigurasi tata letak ditentukan di dalam parameter lambda config, sementara item konten UI dideklarasikan di dalam parameter lambda content.
  • GridTrackSize.Auto: Menentukan ukuran trek otomatis dalam konfigurasi petak berdasarkan ukuran intrinsik konten, misalnya, column(GridTrackSize.Auto) dan row(GridTrackSize.Auto).
  • gap(): Mengonfigurasi jarak baris dan kolom dalam GridConfigurationScope, seperti gap(row = 8.dp, column = 16.dp).

Langkah

Buat tabel perbandingan multi-kolom menggunakan tata letak Grid tunggal dengan penyelarasan kolom otomatis dan penyesuaian ukuran trek untuk semua item.

1. Menghitung baris dan kolom petak untuk menentukan ukuran jalur

Pertama, hitung kolom dan baris untuk menentukan ukuran jalur:

  • Kolom: Jumlah atribut yang Anda bandingkan, ditambah satu kolom untuk nama item.
  • Baris: Jumlah item yang Anda bandingkan, ditambah satu baris header.

Untuk resep ini yang membandingkan dua komponen (FlexBox dan Grid) di empat atribut, Anda memerlukan lima kolom dan tiga baris.

2. Menerapkan tabel perbandingan menggunakan Petak

Buat composable TableInGrid yang menggunakan Grid untuk menata item tabel Anda. Panggil fungsi column dan row di dalam lambda config untuk menentukan ukuran trek, dan tetapkan jarak sel dengan gap(). Karena teks memiliki ukuran intrinsik, GridTrackSize.Auto secara otomatis menyesuaikan ukuran kolom dan baris agar sesuai dengan kontennya.

Di dalam lambda content, tempatkan header dan data tabel Anda. Grid secara otomatis menangani penempatan dan perataan semua sel:

@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")
    }
}

Hasil

Anda kini telah membuat tabel perbandingan dua dimensi yang rapi dengan perataan kolom dan jarak sel otomatis.

Gambar 1. Tabel perbandingan menggunakan Grid.

Referensi lainnya