Tata letak tabel petak

Ikon rating bintang empat

Resep ini menunjukkan bagaimana Grid API 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 FlexBox dan Grid API
Tata Letak Pemuatan lambat Soft wrap Update 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 tepat 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, sedangkan 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 ini 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 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 mengubah 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 bersih dengan perataan kolom dan spasi sel otomatis.

Gambar 1. Tabel perbandingan menggunakan Grid.

Referensi lainnya