Tata letak tabel petak

Ikon rating bintang empat

Resep ini menunjukkan cara API Grid meningkatkan keterbacaan kode dibandingkan dengan struktur bertingkat tradisional. Dengan mengonfigurasi jalur 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 Penggalan kata Pembaruan tata letak dinamis
FlexBox 1D Tidak Ya Ya
Grid 2D Tidak Tidak Ya

Praktik terbaik

Gunakan composable Grid untuk meningkatkan keterbacaan dan kemudahan pemeliharaan 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 jalur otomatis dalam konfigurasi petak berdasarkan ukuran intrinsik konten, misalnya, column(GridTrackSize.Auto) dan row(GridTrackSize.Auto).
  • gap(): Mengonfigurasi spasi baris dan kolom dalam GridConfigurationScope, seperti gap(row = 8.dp, column = 16.dp).

Langkah

Buat tabel perbandingan multi-kolom menggunakan satu tata letak Grid dengan perataan kolom otomatis dan ukuran jalur untuk semua item.

1. Menghitung baris dan kolom petak untuk menentukan ukuran jalur

Pertama, hitung kolom dan baris Anda 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 yang membandingkan dua komponen (FlexBox dan Grid) di empat atribut, Anda memerlukan lima kolom dan tiga baris.

2. Menerapkan tabel perbandingan menggunakan Grid

Buat composable TableInGrid yang menggunakan Grid untuk menata letak item tabel Anda. Panggil fungsi column dan row di dalam lambda config untuk menentukan ukuran jalur, dan tetapkan spasi sel dengan gap(). Karena teks memiliki ukuran intrinsik, GridTrackSize.Auto secara otomatis mengukur 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

Sekarang Anda telah membuat tabel perbandingan dua dimensi yang rapi dengan perataan kolom dan cellspacing otomatis.

Gambar 1. Tabel perbandingan menggunakan Grid.

Referensi lainnya